/*
 * CPA Template System — shared design tokens
 *
 * Owns layout dimensions, motion, canonical colours, course identity variables,
 * shape, shadow and typography stacks consumed by Global Rail and Singular
 * components. Font delivery is intentionally external to this file.
 */


/* =========================================================
   0. Design tokens
   ========================================================= */

:root {
  /* Layout dimensions */
  --cpa-global-rail-width: 96px;
  --cpa-global-mobile-height: 78px;
  --cpa-course-rail-width: 304px;
  --cpa-course-rail-width-tablet: 284px;
  --cpa-course-rail-gutter-width: 48px;
  --cpa-course-rail-gutter-width-compact: 40px;
  --cpa-course-rail-gutter-arrow-y: 28px;
  --cpa-course-drawer-width: min(360px, calc(100vw - 32px));
  --cpa-course-drawer-z: 1120;
  --cpa-course-page-content-max: 1120px;
  --cpa-course-page-reading-max: 720px;
  --cpa-course-page-gutter: clamp(22px, 4vw, 58px);

  --cpa-lesson-max-width: 1200px;
  --cpa-lesson-max-width-collapsed: 1280px;
  --cpa-lesson-collapse-growth: 80px;
  --cpa-lesson-main-padding-x-total: 64px;

  /* Motion */
  --cpa-layout-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cpa-layout-speed: 0.36s;
  --cpa-motion-fast: 0.18s;
  --cpa-motion-medium: 0.28s;
  --cpa-course-outline-open-speed: 0.34s;
  --cpa-course-outline-open-opacity-speed: 0.24s;
  --cpa-course-outline-close-speed: 0.22s;
  --cpa-course-outline-close-opacity-speed: 0.16s;

  /* Canonical colour tokens */
  --cpa-color-bg-page: #F7F6F5;
  --cpa-color-bg-rail: #FCFCFC;
  --cpa-color-bg-rail-hover: #F7F6F5;
  --cpa-color-bg-card: #FFFFFF;
  --cpa-color-bg-dark: #10262B;
  --cpa-color-text: #1E1B18;
  --cpa-color-muted: #6F675F;
  --cpa-color-muted-soft: #8B8178;
  --cpa-color-line: #E8DED4;
  --cpa-color-line-soft: #F0E8E0;
  --cpa-color-line-grid: rgba(232, 222, 212, 0.62);
  --cpa-color-accent: #ED643B;
  --cpa-color-accent-readable: #B8533A;
  --cpa-color-accent-hover: #C94E2E;
  --cpa-color-accent-wash: #FFF3EE;
  --cpa-color-secondary: #6F9FB5;
  --cpa-color-secondary-rgb: 111, 159, 181;
  --cpa-color-secondary-deep: #2F5868;
  --cpa-color-secondary-wash: #EEF6F8;
  --cpa-focus-blue: rgba(var(--cpa-color-secondary-rgb), 0.22);
  --cpa-focus-accent: rgba(237, 100, 59, 0.16);

  /* Course identity. The plugin overrides these on Course Home, Map, Lesson,
     future Resources pages, and their shared course rail. */
  --cpa-course-color: #6F9FB5;
  --cpa-course-color-rgb: 111, 159, 181;
  --cpa-course-color-deep: #537280;
  --cpa-course-color-wash: #F3F7F9;
  --cpa-course-color-line: #D7E4EA;
  --cpa-course-color-soft: #E5EEF2;

  /* Course Home legacy aliases retained while the Home CSS is migrated. */
  --cpa-course-theme: var(--cpa-course-color);
  --cpa-course-theme-rgb: var(--cpa-course-color-rgb);
  --cpa-course-theme-soft: var(--cpa-course-color-soft);
  --cpa-course-theme-mist: var(--cpa-course-color-wash);
  --cpa-course-theme-deep: var(--cpa-course-color-deep);

  /* Common aliases kept for existing selectors and global-rail compatibility */
  --cpa-bg-page: var(--cpa-color-bg-page);
  --cpa-bg-rail: var(--cpa-color-bg-rail);
  --cpa-bg-rail-hover: var(--cpa-color-bg-rail-hover);
  --cpa-bg-card: var(--cpa-color-bg-card);
  --cpa-bg-dark: var(--cpa-color-bg-dark);
  --cpa-ink: var(--cpa-color-text);
  --cpa-muted: var(--cpa-color-muted);
  --cpa-muted-soft: var(--cpa-color-muted-soft);
  --cpa-line: var(--cpa-color-line);
  --cpa-line-soft: var(--cpa-color-line-soft);
  --cpa-line-grid: var(--cpa-color-line-grid);
  --cpa-accent: var(--cpa-color-accent);
  --cpa-accent-readable: var(--cpa-color-accent-readable);
  --cpa-accent-hover: var(--cpa-color-accent-hover);
  --cpa-accent-wash: var(--cpa-color-accent-wash);
  --cpa-secondary: var(--cpa-color-secondary);
  --cpa-secondary-rgb: var(--cpa-color-secondary-rgb);
  --cpa-secondary-deep: var(--cpa-color-secondary-deep);
  --cpa-secondary-wash: var(--cpa-color-secondary-wash);

  /* Shared dark chrome */
  --cpa-dark-chrome-bg: var(--cpa-bg-dark);
  --cpa-dark-chrome-surface: rgba(255, 255, 255, 0.055);
  --cpa-dark-chrome-surface-strong: rgba(255, 255, 255, 0.09);
  --cpa-dark-chrome-details: rgba(255, 255, 255, 0.072);
  --cpa-dark-chrome-line: rgba(var(--cpa-secondary-rgb), 0.24);
  --cpa-dark-chrome-line-strong: rgba(var(--cpa-secondary-rgb), 0.38);
  --cpa-dark-chrome-text: rgba(255, 255, 255, 0.93);
  --cpa-dark-chrome-muted: rgba(255, 255, 255, 0.66);
  --cpa-dark-chrome-control-bg: rgba(255, 255, 255, 0.055);
  --cpa-dark-chrome-control-border: rgba(255, 255, 255, 0.13);
  --cpa-dark-chrome-control-color: rgba(255, 255, 255, 0.82);
  --cpa-dark-chrome-control-muted: rgba(255, 255, 255, 0.66);
  --cpa-dark-chrome-control-shadow: none;
  --cpa-dark-chrome-control-hover-bg: rgba(255, 255, 255, 0.09);
  --cpa-dark-chrome-control-hover-color: #FFFFFF;
  --cpa-dark-chrome-control-hover-shadow: 0 7px 18px rgba(0, 0, 0, 0.15);
  --cpa-dark-chrome-control-selected-bg: rgba(var(--cpa-secondary-rgb), 0.16);
  --cpa-dark-chrome-control-selected-border: rgba(var(--cpa-secondary-rgb), 0.45);
  --cpa-dark-chrome-control-selected-color: #FFFFFF;
  --cpa-dark-chrome-control-selected-hover-bg: rgba(var(--cpa-secondary-rgb), 0.22);
  --cpa-dark-chrome-control-selected-hover-border: rgba(var(--cpa-secondary-rgb), 0.56);

  /* Shared disclosure chevron */
  --cpa-chevron-size: 8px;
  --cpa-chevron-stroke: 1.8px;
  --cpa-chevron-y-closed: -2px;
  --cpa-chevron-y-open: 2px;
  --cpa-chevron-rotation-closed: 45deg;
  --cpa-chevron-rotation-open: -135deg;
  --cpa-chevron-motion: 0.22s var(--cpa-layout-ease);

  /* Shape, shadow and typography */
  --cpa-radius-sm: 6px;
  --cpa-radius: 9px;
  --cpa-radius-lg: 12px;
  --cpa-radius-pill: 999px;
  --cpa-shadow-soft: 0 8px 22px rgba(30, 27, 24, 0.035);
  --cpa-shadow-button: 0 2px 7px rgba(30, 27, 24, 0.035);
  --cpa-shadow-button-hover: 0 5px 13px rgba(30, 27, 24, 0.055);

  --cpa-font-ui: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cpa-font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   1. Shared CPA focus baseline
   ========================================================= */

:where(
  .cpa-global-rail,
  .cpa-lesson-shell,
  .cpa-course-nav,
  .cpa-lesson,
  .cpa-course-home,
  .cpa-course-map,
  .cpa-course-resources,
  .cpa-dashboard
)
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex],
    [role="button"],
    [role="link"]
  ):focus:not(:focus-visible) {
  outline: none !important;
}