/* Eduhouse DS v2 tokens — GENERATED from tokens.json, do not edit.
   Tier 1 primitives + tier 2 semantic roles. Elements reference SEMANTIC tokens only. */
:root {
  /* ── Tier 1 · primitives ─────────────────────────────── */
  --eh-white: #FFFFFF;
  --eh-grey-50: #F6F6F6;  /* brandbook Light Grey — backs surface/page (subtle in-control fill, e.g. the checkbox box on hover) and surface/field-disabled (disabled field bg). It is NOT the page ground; the page ground is white (surface.card) */
  --eh-grey-100: #EEEEEE;  /* backs surface/fill (tags, pills, tracks, ribbons) — NOT disabled fields (those are grey-50) */
  --eh-grey-200: #D9D9D9;
  --eh-grey-300: #CCCCCC;
  --eh-grey-500: #767676;
  --eh-grey-700: #555555;
  --eh-grey-900: #212121;  /* brandbook Black (RGB 33/33/33) */
  --eh-black: #000000;  /* the only pure-black surface: expired/unavailable ribbon fill + spinner ring. The overlays do NOT use it (overlay.modal / overlay.light are their own rgba values) */
  --eh-blue-100: #E3F2FF;  /* brandbook Light Blue */
  --eh-blue-500: #4766FF;  /* brandbook Lavender */
  --eh-navy-900: #000F42;  /* brandbook Dark Blue (Pantone 282C) */
  --eh-mint-100: #DAFAF4;  /* lightest mint — no semantic role since v2.1 (too faint for panels); kept for parity with the tint ladder */
  --eh-mint-200: #B3F0E7;  /* mint at ~35% over white — the success counterpart of peach-200; success notice panels, signed-up tag, new ribbon */
  --eh-mint-500: #54E3D4;  /* brandbook Mint Green (Pantone 3242C) */
  --eh-yellow-100: #FFF5E5;  /* brandbook Light Yellow */
  --eh-peach-200: #FFE2B2;  /* app $peach — warm notice panels */
  --eh-yellow-500: #FFBF0A;  /* brandbook Yellow */
  --eh-orange-500: #FF6A00;  /* brandbook Orange (Pantone 1505C) */
  --eh-red-100: #F5C9C4;
  --eh-red-600: #B74545;
  --eh-green-600: #41A374;
  --eh-focus: #045ECC;  /* keyboard focus ring */
  --eh-space-2: 2px;
  --eh-space-5: 5px;
  --eh-space-10: 10px;
  --eh-space-15: 15px;
  --eh-space-20: 20px;
  --eh-space-30: 30px;
  --eh-space-40: 40px;
  --eh-space-80: 80px;
  --eh-radius-sm: 4px;  /* tags, badges, cards, tabs */
  --eh-radius-md: 10px;  /* inputs, video, tables */
  --eh-radius-lg: 20px;  /* panels, sidebar cards */
  --eh-radius-full: 999px;  /* pills, avatars, tracks */
  --eh-type-2xs: 10px; --eh-lh-2xs: 11.5px;  /* floating labels, micro badges */
  --eh-type-xs: 12px; --eh-lh-xs: 13.8px;  /* micro badges, card meta */
  --eh-type-sm: 14px; --eh-lh-sm: 16.1px;  /* small body, tags, menus */
  --eh-type-base: 16px; --eh-lh-base: 18.4px;  /* body default */
  --eh-type-lg: 18px; --eh-lh-lg: 20.7px;  /* buttons, section links */
  --eh-type-xl: 20px; --eh-lh-xl: 23px;  /* subsection headings */
  --eh-type-2xl: 24px; --eh-lh-2xl: 27.6px;  /* section headings */
  --eh-type-3xl: 32px; --eh-lh-3xl: 36.8px;  /* page titles */
  --eh-type-hero: 40px; --eh-lh-hero: 46px;  /* home hero */
  --eh-content-max: 1500px;
  --eh-content-pad: 20px;
  --eh-header-h: 80px;
  --eh-icon-sm: 14px;
  --eh-icon-md: 20px;
  --eh-icon-lg: 24px;

  /* ── Font roles (only faces that ship as real files) ──── */
  --eh-font-body: 'PlusJakartaSans-Regular', sans-serif;
  --eh-font-medium: 'PlusJakartaSans-Medium', sans-serif;
  --eh-font-bold: 'PlusJakartaSans-Bold', sans-serif;
  --eh-font-display: 'PPAgrandir-Medium', sans-serif;
  --eh-font-icon: 'icomoon';

  /* ── Tier 2 · semantic roles — the only tier elements use ── */
  --eh-text-primary: var(--eh-grey-900);  /* body text, values, labels */
  --eh-text-secondary: var(--eh-grey-700);  /* meta, captions, hints */
  --eh-text-disabled: var(--eh-grey-500);  /* disabled control text */
  --eh-text-inverse: var(--eh-white);  /* text on dark or brand fills */
  --eh-text-link: var(--eh-blue-500);  /* links, active nav */
  --eh-text-heading: var(--eh-navy-900);  /* display headings */
  --eh-surface-page: var(--eh-grey-50);  /* subtle grey fill INSIDE a control — today its only uses are the checkbox box on hover and when disabled. NOT the page ground: the page ground is WHITE (surface.card) */
  --eh-surface-card: var(--eh-white);  /* the page ground — .eh-page sets it on the body element — plus cards, modals and menus. Everything sits directly on white; separation comes from whitespace, hairline frames and fill/tint boxes */
  --eh-surface-fill: var(--eh-grey-100);  /* tags, pills, tracks, ribbons (disabled fields moved to surface.field-disabled) */
  --eh-surface-field-disabled: var(--eh-grey-50);  /* disabled field backgrounds (inputs, date pickers, selects, textareas, toggle rows) — matches app #F8F8F8 */
  --eh-surface-disabled: var(--eh-grey-200);  /* disabled fills */
  --eh-surface-selected: var(--eh-blue-100);  /* selected rows, hero band, active chip */
  --eh-surface-warm: var(--eh-yellow-100);  /* soft warm tint (brandbook Light Yellow) — upcoming ribbon */
  --eh-surface-inverse: var(--eh-navy-900);  /* footer, dark banners */
  --eh-surface-blackout: var(--eh-black);  /* pure-black fills: expired/unavailable ribbon, spinner ring — deliberately black, not surface.inverse navy */
  --eh-border-default: var(--eh-grey-200);  /* frames, dividers, rows */
  --eh-border-strong: var(--eh-grey-300);  /* avatar ring, emphasized frames */
  --eh-border-control: var(--eh-grey-500);  /* checkbox box border, resting and hover — the only border that must clear the 3:1 UI-component contrast minimum (4.54:1 on white). Input/select/textarea field borders are border.default; the radio tick is text.primary (app value, not yet folded) */
  --eh-border-focus: var(--eh-focus);  /* keyboard focus ring */
  --eh-action-primary: var(--eh-blue-500);  /* primary buttons, active controls */
  --eh-action-hover: var(--eh-navy-900);  /* primary hover and press */
  --eh-action-grey-hover: var(--eh-grey-300);  /* grey button hover and press fill (resting is surface.disabled) */
  --eh-action-disabled: var(--eh-grey-200);  /* disabled buttons */
  --eh-feedback-error: var(--eh-red-600);  /* error text, borders, alert fill */
  --eh-feedback-error-surface: var(--eh-red-100);  /* notification bar, expiring ribbon */
  --eh-feedback-success: var(--eh-mint-500);  /* toast fill */
  --eh-feedback-success-surface: var(--eh-mint-200);  /* success notice panels — completed study-plan banner; signed-up tag, new ribbon */
  --eh-feedback-success-icon: var(--eh-green-600);  /* checkmarks on grey fills */
  --eh-feedback-warning-surface: var(--eh-peach-200);  /* warm notice panels — empty state, migration banners, DC sign-up notice, mandatory tag */
  --eh-feedback-notice: var(--eh-orange-500);  /* notice icons, sign-up bell */
  --eh-feedback-progress: var(--eh-yellow-500);  /* progress bar fill */
  --eh-overlay-modal: rgba(0, 0, 0, 0.7);  /* modal scrim, tooltip bubble */
  --eh-overlay-light: rgba(255, 255, 255, 0.8);  /* spinner overlay scrim */
}