/* =====================================================================
   OMF SAT PREP — EDITORIAL DESIGN TOKENS
   Single source of truth for palette, type scale, spacing, frame, and
   motion. Inspired by editorial print systems and tuned for an academic
   SAT-prep brand: warm paper, deep ink, restrained navy.
   ===================================================================== */

:root {
  /* Palette -------------------------------------------------------------- */
  --paper:        #f7f7f2;     /* warm primary paper                  */
  --paper-bright: #fffefa;     /* cards + dropdowns                    */
  --paper-deep:   #e8edf0;     /* alternate band                      */
  --ink:          #23354d;     /* OMF dark navy                       */
  --ink-soft:     #314b6e;     /* secondary text on warm paper        */
  --navy:         #314b6e;     /* OMF primary mark blue               */
  --deep:         #335586;     /* OMF deep blue accent                */
  --slate:        #6f89aa;     /* muted text                          */
  --mist:         #9cadc5;     /* divider lines / hairline            */
  --sky:          #83a7cc;     /* OMF light blue accent               */
  --gold:         #ffefc4;     /* OMF pale gold                       */
  --success:      #2f7d4f;
  --success-bg:   #e3f1e8;
  --warn:         #b45f12;
  --warn-bg:      #f6e9d4;
  --danger:       #b3261e;
  --danger-bg:    #f7e1de;

  /* Frame ---------------------------------------------------------------- */
  --frame:        72.5rem;     /* primary content width                */
  --frame-wide:   84rem;       /* wide page (catalog hero, etc.)       */
  --gutter:       1.5rem;
  --header-h:     72px;

  /* Type families -------------------------------------------------------- */
  --font-display: 'League Spartan', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  /* Type scale (modular — base 16, ratio ~1.25) -------------------------- */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Spacing scale (semantic, 8-step) ------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 144px;

  /* Rules ---------------------------------------------------------------- */
  --rule:         2px solid var(--ink);
  --rule-hair:    1px solid var(--mist);
  --rule-soft:    1px solid rgba(11, 23, 36, 0.08);
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;

  /* Motion --------------------------------------------------------------- */
  --easing:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 140ms var(--easing);
  --motion:      240ms var(--easing);
  --motion-slow: 480ms var(--easing);

  /* Elevation ------------------------------------------------------------ */
  --shadow-sm:   0 1px 2px rgba(11, 23, 36, 0.06);
  --shadow:      0 8px 28px rgba(11, 23, 36, 0.07);
  --shadow-lg:   0 24px 56px rgba(11, 23, 36, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}