/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — every color, space, radius, font and button for the usage pages.
   Vendored 2026-09-29 from the EDS prototyping kit (July 2026 Figma export).
   Rule: app.css never hardcodes a value that has a token here. If a design comp
   contradicts a token, the comp wins: change the token, note the date, re-vendor.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrals (kit: color-neutral/*) ── */
  --color-neutral-000: #FFFFFF;
  --color-neutral-100: #F8FAFC;   /* bg-main */
  --color-neutral-200: #E4E4E4;   /* dividers */
  --color-neutral-300: #B3B3B3;   /* default border */
  --color-neutral-400: #545656;   /* hover border, secondary text */
  --color-neutral-500: #1B1D1D;   /* body text */

  /* ── Blue (kit: color-blue/*) ── */
  --color-blue-000: #EDF8FB;
  --color-blue-100: #CEEBF2;
  --color-blue-200: #3B9CB7;
  --color-blue-300: #1185A6;
  --color-blue-400: #024D64;      /* headings, secondary button, links */

  /* ── Yellow / gold (kit: color-yellow/*; button gold has no token yet) ── */
  --color-yellow-000: #FFF7E8;
  --color-yellow-100: #FEE7B9;    /* text-button hover highlight */
  --color-yellow-200: #FDCF74;
  --color-yellow-300: #FFBD38;
  --color-gold: #FBAF17;          /* primary button, live-site value; no Figma token (kit flags it) */
  --color-gold-hover: #FCBF45;

  /* ── Green, coral, pink (kit primitives) ── */
  --color-green-000: #E3FAF5;
  --color-green-100: #C3E7DF;
  --color-green-200: #2F9780;
  --color-green-400: #124444;
  --color-coral-000: #FFEBDF;
  --color-coral-200: #FE8560;
  --color-coral-300: #C64E2A;     /* danger */
  --color-pink-000: #FFEFF2;
  --color-pink-300: #BE5D68;

  /* ── Material types (kit semantic: materials/*) ── */
  --material-video-accent: #3B9CB7;    --material-video-bg: #EDF8FB;
  --material-activity-accent: #BE5D68; --material-activity-bg: #FFEFF2;
  --material-game-accent: #FFBD38;     --material-game-bg: #FFF7E8;
  --material-edsw-accent: #2F9780;     --material-edsw-bg: #E3FAF5;

  /* ── Semantic aliases used by app.css ── */
  --bg-main: var(--color-neutral-100);
  --bg-card: var(--color-neutral-000);
  --text-body: var(--color-neutral-500);
  --text-muted: var(--color-neutral-400);
  --text-heading: var(--color-blue-400);
  --border-default: var(--color-neutral-300);
  --border-hover: var(--color-neutral-400);
  --border-subtle: var(--color-neutral-200);
  --link: var(--color-blue-400);

  /* ── Status (page-specific; no kit token, chosen from kit primitives) ── */
  --status-ok-bg: var(--color-green-000);    --status-ok-fg: var(--color-green-400);
  --status-warn-bg: var(--color-yellow-000); --status-warn-fg: #97690E;   /* yellow/500 */
  /* status-bad-fg darkened 2026-09-29: coral-300 (#C64E2A) was 4.02:1 on its own tint and
     4.44:1 on --bg-main, under 4.5:1 for small text. #B64827 is coral-300 darkened 8%, the
     smallest step that passes on all three: 4.61 on the tint, 5.09 on --bg-main, 5.32 on white.
     coral-300 itself is unchanged; it is still the kit's danger color. */
  --status-bad-bg: var(--color-coral-000);   --status-bad-fg: #B64827;

  /* ── Spacing (kit: spacing/N = px). Ten steps used on these pages. ── */
  --space-1: 4px;    /* spacing/1 */
  --space-2: 8px;    /* spacing/2 */
  --space-3: 12px;   /* spacing/3 */
  --space-4: 16px;   /* spacing/4 */
  --space-5: 20px;   /* spacing/5 */
  --space-6: 24px;   /* spacing/6 */
  --space-7: 32px;   /* spacing/8 */
  --space-8: 40px;   /* spacing/10 */
  --space-9: 48px;   /* spacing/12 */
  --space-10: 64px;  /* spacing/16 */

  /* ── Radius (kit: borderRadius/*) ── */
  --radius-sm: 2px;
  --radius-default: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Border ── */
  --border-width: 1px;
  --focus-ring-width: 2px;      /* matches .es-btn:focus-visible below; added 2026-09-29 for links */
  --focus-ring-offset: 2px;
  --border-width-strong: 2px;   /* testing notes' dashed border; no kit token, 2026-09-30 */
  --border-width-accent: 4px;   /* the ended note's left rule; no kit token, 2026-09-30 */

  /* ── Type (kit: Lexend; rem sizes; mobile values first, desktop below) ── */
  --font-family: "Lexend", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-xs: 0.75rem;    /* 12 */
  --font-size-s: 0.875rem;    /* 14 */
  --font-size-m: 1rem;        /* 16 */
  --font-size-l: 1rem;        /* 16 mobile / 18 desktop */
  --font-size-xl: 1.25rem;    /* 20 mobile / 24 desktop */
  --font-size-2xl: 1.5rem;    /* 24 mobile / 32 desktop */
  --font-size-3xl: 1.75rem;   /* 28 mobile / 36 desktop */
  --line-height-body: 1.5;
  --line-height-heading: 1.2;

  /* ── Breakpoints (kit values; for reference — media queries can't read vars) ── */
  /* sm 640 · md 860 · lg 1024 · xl 1280 */

  /* ── Layout widths (page-specific; no kit token. Added 2026-09-29 from FRONTEND-SPEC §2, §3, §4.6) ── */
  --layout-max-width: 1120px;   /* main column */
  --landing-max-width: 560px;   /* landing card */
  --modal-max-width: 560px;     /* nudge modal */
  --logo-height: 32px;          /* header wordmark; no kit token, chosen 2026-09-29 */
  --rank-size: 1.125rem;        /* numbered circle in the top lists; no kit token. 1.125rem since Mo, 2026-09-30: smaller and muted so the names scan first (was 1.5rem, 2026-09-29) */
  --tooltip-max-width: 16rem;   /* the (i) tooltip's box; no kit token, 2026-09-30 */
  --tooltip-caret: 6px;         /* the tooltip's caret; no kit token, 2026-09-30 */
  --materials-wide-col: 1.6fr;  /* Top materials column vs skills and goals (1fr each); Mo, 2026-09-30 */

  /* ── Shadows (kit has no shadow tokens; these are the Figma values from buttons.md) ── */
  --shadow-button-hover: 0 3px 5px rgba(27, 29, 29, 0.35);
  --shadow-modal: 0 3px 4px rgba(0, 0, 0, 0.25);
  --backdrop: rgba(27, 29, 29, 0.55);   /* modal backdrop, neutral-500 at 55%; no kit token, 2026-09-29 */
  --modal-list-max-height: 12rem;       /* email list scrolls past ~8 rows; 2026-09-29 */
}

/* Tablet type step (kit md = 860) */
@media (min-width: 860px) {
  :root {
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2rem;
  }
}
/* Desktop type step (kit lg = 1024) */
@media (min-width: 1024px) {
  :root {
    --font-size-l: 1.125rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Buttons (kit components/buttons.md). Four classes, one base.
   Gold is reserved: exactly one gold button per screen — the lead action.
   ══════════════════════════════════════════════════════════════════════════ */
.es-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 38px; padding: 0 var(--space-4);
  font-family: var(--font-family); font-size: var(--font-size-s); font-weight: var(--font-weight-medium);
  line-height: 1; border-radius: var(--radius-full); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms, box-shadow 120ms;
}
.es-btn--large { min-height: 48px; font-size: var(--font-size-l); }
.es-btn--small { min-height: 32px; }
.es-btn:disabled, .es-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.es-btn:focus-visible { outline: 2px solid var(--color-blue-400); outline-offset: 2px; }
.es-btn:active:not(:disabled) { filter: brightness(0.92); }

/* Primary = kit Primary (gold). The lead action only. */
.es-btn-primary { background: var(--color-gold); color: var(--color-neutral-500); }
.es-btn-primary:hover:not(:disabled) { background: var(--color-gold-hover); box-shadow: var(--shadow-button-hover); }

/* Secondary = kit Secondary (blue/400 fill). */
.es-btn-secondary { background: var(--color-blue-400); color: var(--color-neutral-000); }
.es-btn-secondary:hover:not(:disabled) { background: var(--color-blue-200); box-shadow: var(--shadow-button-hover); }
.es-btn-secondary:focus-visible { outline-color: var(--color-neutral-500); }

/* Outline = kit Tertiary Outlined. */
.es-btn-outline { background: transparent; color: var(--color-blue-400); border-color: var(--color-blue-400); }
.es-btn-outline:hover:not(:disabled) { background: var(--color-blue-200); color: var(--color-neutral-000); box-shadow: var(--shadow-button-hover); }
.es-btn-outline:focus-visible { outline-color: var(--color-neutral-500); }

/* Text = kit Text Button (underlined link style). Use <a> for navigation, <button> for actions. */
.es-btn-text {
  display: inline-block; padding: var(--space-1) 0; min-height: 24px;
  font-family: var(--font-family); font-weight: var(--font-weight-medium);
  color: var(--color-blue-400); background: transparent; border: 0;
  border-bottom: 1px solid var(--color-blue-400); text-decoration: none; cursor: pointer;
}
.es-btn-text:hover, .es-btn-text:focus-visible { background: var(--color-yellow-100); border-bottom: 3px solid var(--color-neutral-500); outline: none; }
.es-btn-text:active { border-bottom-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .es-btn { transition: none; }
}