/* ==========================================================================
   ORI SHARED PLATFORM — VISUAL SYSTEM LOCK V1 DESIGN TOKENS
   Approved Direction: macOS-Inspired • Premium • Modern • Calm • Airy
   Strict Palette: Deep Navy / Blue + Green + White + Soft Blue-Gray Neutrals
   Zero: Purple, Violet, Pink, Magenta
   ========================================================================== */

:root {
  /* Typography System */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* --- Deep Navy & Dark Information (Navigation / Headers / Structure) --- */
  --navy-900: #0b1329;              /* Deepest Navy Surface & Inks */
  --navy-800: #0f172a;              /* Primary Slate Navy / Strong Text */
  --navy-700: #1e293b;              /* Secondary Slate Navy */
  --navy-600: #334155;              /* Balanced Slate Tone */

  /* --- Blue Family (Navigation / Information / Active Filters) --- */
  --blue-primary: #0284c7;          /* Crisp macOS Precision Blue (Sky 600) */
  --blue-hover: #0369a1;            /* Deep Blue Hover (Sky 700) */
  --blue-soft: #f0f9ff;             /* Ultra Soft Blue Tint (Sky 50) */
  --blue-subtle: #e0f2fe;           /* Soft Blue Pill Fill (Sky 100) */
  --blue-border: #bae6fd;           /* Hairline Blue Border (Sky 200) */
  --blue-glow: rgba(2, 132, 199, 0.15);

  /* --- Green Family (Primary Learning & Action CTA / Success / Mastery) --- */
  --green-primary: #059669;         /* Premium Emerald Action CTA (Emerald 600) */
  --green-hover: #047857;           /* Deep Forest Green Hover (Emerald 700) */
  --green-soft: #ecfdf5;            /* Ultra Soft Green Tint (Emerald 50) */
  --green-subtle: #dcfce7;          /* Soft Green Pill Fill (Emerald 100) */
  --green-border: #a7f3d0;          /* Hairline Green Border (Emerald 200) */
  --green-glow: rgba(5, 150, 105, 0.15);

  /* --- Surfaces & Canvas (White & Soft Light-Gray Neutrals) --- */
  --surface: #ffffff;               /* Pure White Card Surface */
  --surface-soft: #f8fafc;          /* Calm Off-White Canvas (Slate 50) */
  --surface-subtle: #f1f5f9;        /* Neutral Subtle Pill / Card Fill (Slate 100) */
  --surface-hover: #f1f5f9;         /* Neutral Surface Hover */
  --surface-elevated: #ffffff;      /* Modal / Floating Menu Surface */
  --surface-translucent: rgba(255, 255, 255, 0.88); /* macOS Frosted Glass */
  --surface-translucent-dark: rgba(15, 23, 42, 0.85);

  /* --- Hairline Borders & Dividers --- */
  --border: #e2e8f0;                /* Hairline Neutral Border (Slate 200) */
  --border-subtle: rgba(226, 232, 240, 0.8);
  --border-strong: #cbd5e1;         /* Focus / Active Border (Slate 300) */
  --border-focus: rgba(2, 132, 199, 0.45);

  /* --- Typography Colors --- */
  --text-primary: #0f172a;          /* Deepest Navy Heading & Primary Ink */
  --text-secondary: #475569;        /* Balanced Body Slate (Slate 600) */
  --text-muted: #64748b;            /* Secondary Metadata Slate (Slate 500) */
  --text-faint: #94a3b8;            /* Tertiary Auxiliary Slate (Slate 400) */
  --text-inverted: #ffffff;         /* Pure White Text on Dark / Green */

  /* --- Subtle macOS Shadows --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 2px 8px -2px rgba(15, 23, 42, 0.03);
  --shadow-elevated: 0 16px 36px -4px rgba(15, 23, 42, 0.1), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-glass: 0 4px 20px -2px rgba(15, 23, 42, 0.06);

  /* --- macOS Geometry (Soft Rounded Corners) --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     UNIFIED BUTTON SYSTEM DESIGN TOKENS
     ========================================================================== */
  /* Primary Action: Emerald Green */
  --btn-primary-bg: #059669;
  --btn-primary-hover: #047857;
  --btn-primary-active: #065f46;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
  --btn-primary-shadow-hover: 0 4px 10px rgba(5, 150, 105, 0.35);

  /* Secondary Action: Navigation Blue */
  --btn-secondary-bg: #0284c7;
  --btn-secondary-hover: #0369a1;
  --btn-secondary-active: #075985;
  --btn-secondary-text: #ffffff;
  --btn-secondary-soft-bg: #f0f9ff;
  --btn-secondary-soft-border: #bae6fd;
  --btn-secondary-soft-text: #0284c7;
  --btn-secondary-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
  --btn-secondary-shadow-hover: 0 4px 10px rgba(2, 132, 199, 0.35);

  /* Neutral Action: Crisp White / Slate Gray Outline */
  --btn-neutral-bg: #ffffff;
  --btn-neutral-border: #dbe4ee;
  --btn-neutral-text: #334155;
  --btn-neutral-hover-bg: #f8fafc;
  --btn-neutral-hover-border: #cbd5e1;
  --btn-neutral-active-bg: #f1f5f9;

  /* Warning / Submit Action: Warm Orange */
  --btn-warning-bg: #ea580c;
  --btn-warning-hover: #c2410c;
  --btn-warning-active: #9a3412;
  --btn-warning-text: #ffffff;
  --btn-warning-shadow: 0 2px 6px rgba(234, 88, 12, 0.25);
  --btn-warning-shadow-hover: 0 4px 10px rgba(234, 88, 12, 0.35);

  /* Danger / Destructive Action: Red */
  --btn-danger-bg: #dc2626;
  --btn-danger-hover: #b91c1c;
  --btn-danger-active: #991b1b;
  --btn-danger-text: #ffffff;

  /* Standard Geometry */
  --btn-radius-sm: 6px;
  --btn-radius: 8px;
  --btn-radius-lg: 10px;

  --btn-height-sm: 34px;
  --btn-height: 40px;
  --btn-height-lg: 46px;

  /* Accessible Focus Rings */
  --btn-focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.25);
  --btn-focus-ring-blue: 0 0 0 3px rgba(2, 132, 199, 0.25);
  --btn-focus-ring-warning: 0 0 0 3px rgba(234, 88, 12, 0.25);
}

/* ==========================================================================
   ORI BRAND SYSTEM V2 — "EDITORIAL EMERALD" (test runner redesign, pass 1)
   Additive tokens only: existing V1 tokens above are unchanged, so pages that
   have not been redesigned yet (home, vocab, dashboard) render exactly as before.
   Emerald = brand / mode / success · Blue = navigation / selection
   Orange = submit only · Red = incorrect only · No purple.
   ========================================================================== */
:root {
  /* Type */
  /* Locally installed fonts only: no network dependency (exam pages must load instantly / offline). */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", "Avenir", "Segoe UI Variable Display", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-label: 11px;          /* uppercase micro labels */
  --fs-body: 15px;
  --fs-question: 17px;       /* question stems stay highly readable */
  --fs-title: 22px;
  --tracking-label: 0.12em;

  /* Brand emerald */
  --brand-900: #064e3b;
  --brand-800: #065f46;
  --brand-700: #047857;
  --brand-600: #059669;
  --brand-400: #34d399;
  --brand-300: #6ee7b7;
  --brand-100: #d1fae5;
  --brand-50: #f0fdf4;

  /* Navigation blue */
  --nav-700: #0369a1;
  --nav-600: #0284c7;
  --nav-200: #bae6fd;
  --nav-100: #e0f2fe;
  --nav-50: #f0f9ff;
  --aqua-50: #ecfeff;

  /* Ink (text) */
  --ink-900: #0f172a;
  --ink-800: #111827;
  --ink-600: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;

  /* Surfaces & lines */
  --canvas: #f6f8f7;               /* warm off-white page */
  --card: #ffffff;
  --card-tint: #f8fafc;
  --line: #e3e8ee;
  --line-strong: #cfd8e3;

  /* Semantic roles */
  --submit: #ea580c;
  --submit-hover: #c2410c;
  --error: #dc2626;
  --error-soft: #fef2f2;
  --success: var(--brand-600);
  --success-soft: var(--brand-50);
  --select: var(--nav-600);
  --select-soft: var(--nav-50);

  /* Geometry */
  --r-card: 22px;
  --r-panel: 16px;
  --r-control: 12px;
  --r-chip: 10px;
  --r-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Depth: soft card lift + one "hard offset" accent for badges/counters */
  --shadow-card-v2: 0 1px 0 rgba(15, 23, 42, 0.04), 0 18px 40px -28px rgba(6, 78, 59, 0.28);
  --shadow-float: 0 10px 28px -14px rgba(15, 23, 42, 0.28);
  --shadow-hard-brand: 3px 3px 0 var(--brand-400);
  --shadow-hard-ink: 3px 3px 0 var(--ink-900);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.28);
  --focus-ring-brand: 0 0 0 3px rgba(5, 150, 105, 0.28);
}