/* ==========================================================================
   ONE EXAM CBT Platform - Design Tokens (Serene Precision & Tactile Calm)
   Generated according to DESIGN.md and Google Stitch specifications
   ========================================================================== */

:root {
  /* --- Primary Canvas & Surface Tokens --- */
  --color-canvas-base: #FFF7DD;               /* Warm natural paper canvas base */
  --color-card-surface: #FAF7EF;              /* Soft off-white question module surface */
  --color-surface: #f9f9ff;
  --color-surface-dim: #cfdaf2;
  --color-surface-bright: #f9f9ff;
  --color-surface-container-lowest: #ffffff;  /* Elevated crisp white */
  --color-surface-container-low: #f0f3ff;
  --color-surface-container: #e7eeff;
  --color-surface-container-high: #dee8ff;
  --color-surface-container-highest: #d8e3fb;
  --color-surface-variant: #d8e3fb;

  /* --- Ink & Typographic Contrast Tokens --- */
  --color-on-surface: #111c2d;                /* Deep Slate Header Text */
  --color-on-surface-variant: #42474c;        /* Muted Slate Ink */
  --color-inverse-surface: #263143;
  --color-inverse-on-surface: #ecf1ff;
  --color-outline: #72787d;
  --color-outline-variant: #c2c7cd;
  --color-border-subtle: #d2dee6;
  --color-border-divider: #e2e8f0;

  /* --- Accent Tokens (Steel Blue, Soft Turquoise, Pastel Mint) --- */
  --color-primary: #416279;
  --color-on-primary: #ffffff;
  --color-primary-container: #80a1ba;         /* Primary Steel Blue */
  --color-on-primary-container: #14384d;
  --color-inverse-primary: #a9cbe5;
  --color-primary-fixed: #c8e6ff;
  --color-primary-fixed-dim: #a9cbe5;
  --color-on-primary-fixed: #001e2e;
  --color-on-primary-fixed-variant: #294a60;

  --color-secondary: #346666;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #b5e9e8;       /* Soft Turquoise */
  --color-on-secondary-container: #396b6a;
  --color-secondary-fixed: #b8eceb;
  --color-secondary-fixed-dim: #9dd0cf;
  --color-on-secondary-fixed: #002020;
  --color-on-secondary-fixed-variant: #194e4e;

  --color-tertiary: #41674c;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #7ea688;
  --color-on-tertiary-container: #163b24;
  --color-tertiary-fixed: #c2edcb;            /* Pastel Mint Green */
  --color-tertiary-fixed-dim: #a7d0b0;
  --color-on-tertiary-fixed: #00210e;
  --color-on-tertiary-fixed-variant: #294e36;

  /* --- Status, Warning & Error Tokens --- */
  --color-doubt: #F6D899;                     /* Soft Amber Warning / Ragu-ragu */
  --color-doubt-text: #78350f;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-answered: #c2edcb;
  --color-on-answered: #00210e;

  /* --- Typography Font Families --- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-headline: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-numeric: 'Manrope', monospace, sans-serif;
  --font-label: 'Manrope', system-ui, -apple-system, sans-serif;

  /* --- Typography Scales --- */
  --text-display-lg: 40px;
  --lh-display-lg: 48px;
  --text-headline-lg: 28px;
  --lh-headline-lg: 36px;
  --text-headline-md: 22px;
  --lh-headline-md: 30px;
  --text-headline-sm: 18px;
  --lh-headline-sm: 26px;
  --text-body-xl: 19px;
  --lh-body-xl: 30px;
  --text-body-lg: 16px;
  --lh-body-lg: 26px;
  --text-body-md: 14px;
  --lh-body-md: 22px;
  --text-body-sm: 13px;
  --lh-body-sm: 18px;
  --text-label-lg: 15px;
  --text-label-md: 13px;
  --text-label-sm: 11px;
  --text-timer-numeric: 28px;

  /* --- Border Radiuses --- */
  --radius-xs: 0.25rem;   /* 4px */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* --- Spacings --- */
  --space-2xs: 0.125rem;  /* 2px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2.5rem;     /* 40px */
  --gutter: 1.5rem;
  --gutter-desktop: 2rem;

  /* --- Elevations & Soft Tactile Shadows --- */
  --shadow-level-0: none;
  --shadow-level-1: 0 4px 20px -2px rgba(30, 41, 59, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-level-2: 0 8px 24px -4px rgba(128, 161, 186, 0.16), 0 2px 6px -1px rgba(30, 41, 59, 0.04);
  --shadow-level-3: 0 20px 40px -8px rgba(15, 23, 42, 0.12);
  --shadow-clay-primary: 0 3px 0 #314a5d;
  --shadow-clay-card: 0 3px 0 rgba(128, 161, 186, 0.25);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* --- Transitions --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}