/* Handrail Learning design tokens, v1.0 (2026-11-11). Source of truth: BRAND/BRAND_PACK.md.
   Colours are named by their job. Light theme on :root; dark theme under [data-theme="dark"]
   and prefers-color-scheme. Contrast ratios (WCAG 2.2) are in BRAND_PACK.md section 5. */

:root {
  color-scheme: light;

  /* Core palette (raw values; use the job tokens below in components) */
  --hr-cobalt: #2F4BFF;
  --hr-cobalt-deep: #1A2CB8;
  --hr-lime: #C8F04A;
  --hr-ink: #111428;
  --hr-paper: #F7F8FF;
  --hr-white: #FFFFFF;

  /* Jobs */
  --color-text: #111428;            /* body text, 17.2:1 on page */
  --color-text-muted: #4A5070;      /* secondary text, 7.4:1 on page */
  --color-page: #F7F8FF;            /* page background */
  --color-surface: #FFFFFF;         /* cards, inputs */
  --color-raised: #E6EAFF;          /* cobalt mist: selected rows, chips */
  --color-line: #D5D9EE;            /* decorative dividers only */
  --color-border-input: #4A5070;    /* form control borders, 7.4:1 (non-text needs 3:1) */
  --color-action: #2F4BFF;          /* buttons, links, things you can press */
  --color-on-action: #FFFFFF;       /* text on action, 5.9:1 */
  --color-action-hover: #1A2CB8;    /* hover / pressed, white text 10.0:1 */
  --color-brand-surface: #2F4BFF;   /* hero bands, certificate band */
  --color-on-brand: #FFFFFF;
  --color-highlight: #C8F04A;       /* lime: highlights behind dark text, the mark on dark. Never text on light */
  --color-on-highlight: #111428;    /* 13.9:1 */
  --color-highlight-tint: #F2FCD6;
  --color-focus: #111428;           /* 3px focus outline; lime halo on dark surfaces */
  --color-focus-halo: #C8F04A;
  --color-success: #1B7A3E;         /* 5.1:1 on page */
  --color-success-tint: #E3F4E8;
  --color-error: #B4232F;           /* 6.2:1 on page */
  --color-error-tint: #FBE7E8;
  --color-warning: #8A5A00;         /* 5.6:1 on page */
  --color-warning-tint: #FFF2CF;
  --color-mark: #2F4BFF;            /* logo symbol on light: all cobalt */
  --color-mark-accent: #2F4BFF;     /* last third of the rail; lime only on dark (B3) */

  /* Type */
  --font-display: "Lexend", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Verdana, Arial, sans-serif;
  --text-display: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --text-headline: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-title: 1.375rem;
  --text-lead: 1.25rem;
  --text-body: 1.125rem;            /* website body; courses use 1.25rem (DESIGN.md) */
  --text-small: 1rem;
  --text-label: 0.8125rem;
  --leading-tight: 1.15;
  --leading-body: 1.55;
  --measure: 65ch;
  --weight-display: 600;
  --weight-strong: 700;

  /* Space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Shape: rounded, echoing the mark's round terminals */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
  --stroke-icon: 2px;
  --target-min: 48px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(17, 20, 40, .06), 0 6px 18px rgba(17, 20, 40, .07);

  /* Motion */
  --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-text: #EEF0FF;            /* 17.0:1 on page */
  --color-text-muted: #A9AFCC;      /* 8.9:1 */
  --color-page: #0B0D1C;
  --color-surface: #171B33;
  --color-raised: #22284A;
  --color-line: #2A3052;
  --color-border-input: #A9AFCC;
  --color-action: #8C9DFF;          /* light cobalt: 7.7:1 on page */
  --color-on-action: #111428;       /* 7.3:1 */
  --color-action-hover: #B3BFFF;
  --color-brand-surface: #1A2CB8;
  --color-on-brand: #FFFFFF;
  --color-highlight: #C8F04A;
  --color-on-highlight: #111428;
  --color-highlight-tint: #2B3312;
  --color-focus: #C8F04A;           /* 14.7:1 on page */
  --color-focus-halo: #111428;
  --color-success: #6FD08F;
  --color-success-tint: #12301E;
  --color-error: #FF8A92;
  --color-error-tint: #3A1418;
  --color-warning: #F2C14E;
  --color-warning-tint: #33270A;
  --color-mark: #FFFFFF;
  --color-mark-accent: #C8F04A;
  --shadow-card: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-text: #EEF0FF; --color-text-muted: #A9AFCC; --color-page: #0B0D1C; --color-surface: #171B33;
    --color-raised: #22284A; --color-line: #2A3052; --color-border-input: #A9AFCC;
    --color-action: #8C9DFF; --color-on-action: #111428; --color-action-hover: #B3BFFF;
    --color-brand-surface: #1A2CB8; --color-on-brand: #FFFFFF;
    --color-highlight: #C8F04A; --color-on-highlight: #111428; --color-highlight-tint: #2B3312;
    --color-focus: #C8F04A; --color-focus-halo: #111428;
    --color-success: #6FD08F; --color-success-tint: #12301E; --color-error: #FF8A92; --color-error-tint: #3A1418;
    --color-warning: #F2C14E; --color-warning-tint: #33270A; --color-mark: #FFFFFF; --color-mark-accent: #C8F04A; --shadow-card: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}