/* =========================================================================
   tokens.css — design tokens for EqualWeb Academy
   Two tiers:
     1) PRIMITIVES  — raw ramps (--teal-600, --gray-900). Never used directly
        by components except where noted.
     2) SEMANTIC ALIASES — what components consume (--bg, --text, --link...).
        Themes only re-point the aliases; primitives stay constant.

   THEMING
     - :root            = light (default)
     - @media dark      = auto dark when the OS prefers it AND user hasn't chosen
     - [data-theme=...]  = explicit user choice (wins over the media query)
   Always pair with <meta name="color-scheme" content="light dark"> in HTML.

   CONTRAST (the whole point — verified vs the surface each is used on):
     --text on --bg .................... AAA (>= 7:1)
     --text-muted on --bg .............. AAA (>= 7:1)
     --link on --bg .................... AA  (>= 4.5:1)
     --color-brand (teal-400) .......... NON-TEXT ONLY (~2.3:1 on white)
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- PRIMITIVES: brand teal ramp ---------------------------------- */
  --teal-50:  #f0fdfb;
  --teal-100: #c3f5ea; /* EqualWeb light mint tint */
  --teal-200: #99efe1;
  --teal-300: #5ce0cc;
  --teal-accent: #2ee6c2; /* EqualWeb BRIGHT mint — accent/emphasis on DARK only */
  --teal-400: #00c0a8; /* BRAND. Decorative / large fills w/ dark text only. ~2.3:1 on white */
  --teal-500: #0e9c89;
  --teal-600: #0e7c6b; /* link / UI text on white ~4.8:1 (AA) — EqualWeb teal */
  --teal-700: #0b6053; /* ~6.3:1 (AA+) */
  --teal-800: #0b5347; /* emphasis text on white ~7.4:1 (AAA) */
  --teal-900: #08382f;

  /* ---- PRIMITIVES: neutral (cool) ramp ------------------------------ */
  /* Cool SLATE ramp — matches the EqualWeb platform neutrals. */
  --gray-0:   #ffffff;
  --gray-50:  #f6f8fa; /* light section background */
  --gray-100: #eef1f5;
  --gray-200: #cdd6e0; /* border */
  --gray-300: #aeb9c6;
  --gray-400: #8a97a6;
  --gray-500: #64748b;
  --gray-600: #475569; /* ~7.4:1 on white — safe muted text (AAA) */
  --gray-700: #334155;
  --gray-800: #11161d; /* elevated dark surface */
  --gray-900: #0a0e12; /* near-black navy — body text ~18:1 (AAA) */
  --gray-950: #070b10; /* deepest surface */

  /* ---- PRIMITIVES: semantic hues (each: -500 fill, -700 text-on-white, -bg tint) */
  --green-500: #18a558; /* EqualWeb CTA green — fill w/ dark text */
  --green-700: #0f7a3f; /* text on white ~4.7:1 */
  --green-bg:  #e7f6ed;

  --amber-400: #f5a623; /* fill w/ dark text */
  --amber-700: #8a5300; /* text on white ~4.8:1 */
  --amber-bg:  #fdf3e0;

  --red-500:   #e5484d; /* fill */
  --red-700:   #b4232a; /* text on white ~5.3:1 */
  --red-bg:    #fdeced;

  --blue-500:  #2a7de1; /* fill */
  --blue-700:  #1457a8; /* text on white ~5.6:1 */
  --blue-bg:   #e8f1fc;

  /* ---- SEMANTIC ALIASES (LIGHT) ------------------------------------- */
  --bg:            var(--gray-0);
  --bg-subtle:     var(--gray-50);
  --bg-elevated:   var(--gray-0);
  --surface-sunken:var(--gray-100);
  --text:          var(--gray-900);
  --text-muted:    var(--gray-600);
  --text-inverse:  var(--gray-0);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --link:          var(--teal-700); /* EqualWeb teal, ~6.3:1 on white */
  --link-hover:    var(--teal-800);
  --link-visited:  #6b3fa0;
  --accent:        var(--teal-accent); /* bright mint — on DARK surfaces only */

  --color-brand:       var(--teal-400); /* NON-TEXT ONLY */
  --color-brand-text:  var(--teal-700); /* the readable brand color for text */
  --text-on-brand:     var(--gray-900); /* dark text placed on a teal-400 fill */

  --color-focus:   #0b5cd6; /* >= 3:1 on both light surfaces and the brand fill */

  /* status foreground/background pairs (consumed by callouts, badges, forms) */
  --info-fg:    var(--blue-700);   --info-bg:    var(--blue-bg);   --info-border:    #b6d4f6;
  --success-fg: var(--green-700);  --success-bg: var(--green-bg);  --success-border: #b6e2c7;
  --warning-fg: var(--amber-700);  --warning-bg: var(--amber-bg);  --warning-border: #f0d59a;
  --danger-fg:  var(--red-700);    --danger-bg:  var(--red-bg);    --danger-border:  #f4b8bb;

  /* ---- TYPOGRAPHY --------------------------------------------------- */
  /* EqualWeb type: Inter for body, Plus Jakarta Sans for display headings.
     Robust system fallbacks so the site still works offline (file://). */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Hebrew", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", Menlo, Consolas, monospace;

  /* rem-based modular scale (~1.2). Never px → 200%/400% zoom safe. */
  --text-xs:   0.79rem;
  --text-sm:   0.889rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.266rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.898rem;
  --text-3xl:  2.281rem;
  --text-4xl:  2.887rem;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.6;  /* body — exceeds 1.5 min */
  --leading-loose: 1.8;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --measure: 66ch;       /* max line length for readable prose */

  /* ---- SPACING (4px base) ------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---- SIZING / TARGETS -------------------------------------------- */
  --target-min: 24px;   /* WCAG 2.2 SC 2.5.8 floor */
  --target-comfortable: 44px; /* preferred */

  /* ---- RADII / BORDER / SHADOW ------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  --border-1: 1px;
  --border-2: 2px;

  /* Layered, soft shadows (cool near-black tint) for a refined, modern feel. */
  --shadow-sm: 0 1px 2px rgba(10, 14, 18, 0.06), 0 1px 1px rgba(10, 14, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 14, 18, 0.08), 0 2px 4px rgba(10, 14, 18, 0.05);
  --shadow-lg: 0 18px 40px rgba(10, 14, 18, 0.13), 0 6px 14px rgba(10, 14, 18, 0.07);

  /* ---- FOCUS RING --------------------------------------------------- */
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---- MOTION ------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);

  /* ---- Z-INDEX ------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 800;
  --z-skiplink: 1000;

  /* ---- LAYOUT ------------------------------------------------------- */
  --container-max: 72rem;
  --sidebar-width: 16rem;
  --bp-sm: 36rem;   /* 576px */
  --bp-md: 48rem;   /* 768px */
  --bp-lg: 64rem;   /* 1024px */
}

/* =========================================================================
   DARK — auto (only when user has NOT made an explicit choice)
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:            var(--gray-900);
    --bg-subtle:     var(--gray-950);
    --bg-elevated:   var(--gray-800);
    --surface-sunken:var(--gray-950);
    --text:          var(--gray-50);
    --text-muted:    var(--gray-300);
    --text-inverse:  var(--gray-900);

    --border:        var(--gray-700);
    --border-strong: var(--gray-600);

    --link:          var(--teal-accent); /* bright mint on dark — high contrast */
    --link-hover:    #7ff0db;
    --link-visited:  #c8a8f0;

    --color-brand-text: var(--teal-accent);
    --text-on-brand:    #062d28;       /* dark text still rides on teal-400 fill */

    --color-focus:   #7cc4ff;

    --info-fg:#cfe4fb;    --info-bg:#10263f;    --info-border:#2a4d77;
    --success-fg:#bce8cf; --success-bg:#0f2a1c; --success-border:#1f5236;
    --warning-fg:#f3d9a6; --warning-bg:#2e2206; --warning-border:#5a4410;
    --danger-fg:#f6c2c4;  --danger-bg:#2e1012;  --danger-border:#5a2327;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.55);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  }
}

/* =========================================================================
   EXPLICIT THEMES (user choice via theme switcher → <html data-theme="...">)
   ========================================================================= */
[data-theme="light"] { color-scheme: light; } /* inherits :root light aliases */

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            var(--gray-900);
  --bg-subtle:     var(--gray-950);
  --bg-elevated:   var(--gray-800);
  --surface-sunken:var(--gray-950);
  --text:          var(--gray-50);
  --text-muted:    var(--gray-300);
  --text-inverse:  var(--gray-900);
  --border:        var(--gray-700);
  --border-strong: var(--gray-600);
  --link:          var(--teal-accent);
  --link-hover:    #7ff0db;
  --link-visited:  #c8a8f0;
  --color-brand-text: var(--teal-accent);
  --text-on-brand:    #062d28;
  --color-focus:   #7cc4ff;
  --info-fg:#cfe4fb;    --info-bg:#10263f;    --info-border:#2a4d77;
  --success-fg:#bce8cf; --success-bg:#0f2a1c; --success-border:#1f5236;
  --warning-fg:#f3d9a6; --warning-bg:#2e2206; --warning-border:#5a4410;
  --danger-fg:#f6c2c4;  --danger-bg:#2e1012;  --danger-border:#5a2327;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
}

/* High-contrast: pure black-on-white, heavy borders, underlined links.
   (Separate from Windows forced-colors, handled per-component.) */
[data-theme="hc"] {
  color-scheme: light;
  --bg:            #ffffff;
  --bg-subtle:     #ffffff;
  --bg-elevated:   #ffffff;
  --surface-sunken:#ffffff;
  --text:          #000000;
  --text-muted:    #000000;
  --text-inverse:  #ffffff;
  --border:        #000000;
  --border-strong: #000000;
  --link:          #00413a; /* very dark teal, always underlined in base.css */
  --link-hover:    #000000;
  --link-visited:  #4b0082;
  --color-brand-text: #00413a;
  --text-on-brand:    #000000;
  --color-focus:   #000000;
  --info-fg:#000000;    --info-bg:#ffffff;    --info-border:#000000;
  --success-fg:#000000; --success-bg:#ffffff; --success-border:#000000;
  --warning-fg:#000000; --warning-bg:#ffffff; --warning-border:#000000;
  --danger-fg:#000000;  --danger-bg:#ffffff;  --danger-border:#000000;
  --border-1: 2px; /* thicker everywhere */
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}