/* ============================================================
   Safety Academia — Design tokens
   See DESIGN-RULES.md §2–§4, §7 for rationale.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --ink:        #0A0A0B;
  --ink-2:      #1C1D21;
  --ink-3:      #2A2C32;
  --graphite:   #5B5F69;
  --smoke:      #9CA0AB;
  --line:       #E5E7EB;
  --line-soft:  #EEF0F3;
  --paper:      #F6F7F9;
  --paper-2:    #FAFAFB;
  --white:      #FFFFFF;

  --red:        #E11932;
  --red-deep:   #A60E20;
  --red-ink:    #5A0610;
  --red-tint:   #FBE7EA;

  /* Semantic */
  --bg:               var(--white);
  --bg-soft:          var(--paper);
  --text:             var(--ink);
  --text-muted:       var(--graphite);
  --text-faint:       var(--smoke);
  --border:           var(--line);
  --border-soft:      var(--line-soft);
  --accent:           var(--red);
  --accent-deep:      var(--red-deep);

  /* ---- Typography ---- */
  --font-base: "FiraGO", "Noto Sans Georgian", "Inter", system-ui,
               -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-11:   0.6875rem;   /* 11px — eyebrow */
  --fs-12:   0.75rem;     /* 12px */
  --fs-13:   0.8125rem;   /* 13px */
  --fs-14:   0.875rem;    /* 14px */
  --fs-15:   0.9375rem;   /* 15px — nav */
  --fs-16:   1rem;        /* 16px — body */
  --fs-18:   1.125rem;
  --fs-20:   1.25rem;
  --fs-24:   1.5rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* Tracking — used sparingly, never on body */
  --tracking-eyebrow: 0.08em;

  /* ---- Spacing (4-px scale) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---- Layout ---- */
  --container:        1400px;
  --gutter:           24px;
  --header-h:         100px;
  --header-h-sticky:  64px;
  --topbar-h:         36px;

  /* ---- Radii ---- */
  --r-0:    0;
  --r-1:    4px;
  --r-2:    6px;
  --r-3:    8px;
  --r-4:    12px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 0 rgba(10, 10, 11, 0.06);
  --shadow-2: 0 1px 2px rgba(10, 10, 11, 0.06),
              0 8px 24px -12px rgba(10, 10, 11, 0.12);
  --shadow-mega: 0 24px 48px -24px rgba(10, 10, 11, 0.18),
                 0 1px 0 var(--line);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 320ms;

  /* ---- Z-stack ---- */
  --z-header:    100;
  --z-mega:      90;
  --z-drawer:    200;
  --z-backdrop:  150;
}