/* ============================================
   Rulaxy — Design Tokens (Single Source of Truth)
   ============================================
   v0.4 (2026-05-23) — Slab refactor.

   Brand direction: Engineering title-block + aviation-manual slab serif.
   - Slab Serif everywhere (Roboto Slab self-hosted, 34KB variable woff2)
   - Mono Labels (SF Mono / JetBrains Mono) for codes & status pills
   - Royal Blue primary + Burnt Orange accent (Boeing-heritage palette)
   - Warm off-white background (aviation-manual paper)
   - Sharp borders, engineering rules instead of soft shadows
   - Title-block monogram (no letters) — engineering-drawing convention

   Privacy: Roboto Slab is served from our own origin (fonts/) — no
   third-party CDN call, no IP-leak, no cookie. Apache 2.0 license.

   Dokumentation: DESIGN.md
   ============================================ */

/* ============================================================
   FONT FACE — Roboto Slab (Variable, Latin subset)
   ============================================================ */
@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-latin.woff2") format("woff2-variations"),
       url("fonts/roboto-slab-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   THEME — DAY (default)
   ============================================================ */
:root {
  color-scheme: light dark;

  /* ============ COLOR — SURFACES (Day) ============ */
  --color-bg:            #fafaf5;   /* warm off-white — aviation manual paper */
  --color-bg-elevated:   #ffffff;   /* card / table bg */
  --color-surface:       #ffffff;   /* card bg */
  --color-surface-hover: #f5f5f0;   /* card hover (warmer than zinc) */
  --color-border:        #d6d3d1;   /* stone-300, warm */
  --color-border-strong: #a8a29e;   /* stone-400, rule lines */
  --color-border-rule:   #18181b;   /* table-head underline, title-block frames */
  --color-border-active: #1e3a8a;   /* focus = primary */

  /* ============ COLOR — TEXT (Day) ============ */
  --color-text:          #18181b;   /* ink black (not pure black) */
  --color-text-strong:   #0a0a0a;   /* extra emphasis */
  --color-text-muted:    #52525b;   /* zinc-600 */
  --color-text-subtle:   #78716c;   /* margin notes / footnotes */
  --color-text-inverse:  #fafaf5;   /* text on solid royal-blue */

  /* ============ COLOR — BRAND (Day) ============ */
  --color-primary:        #1e3a8a;  /* royal blue — Boeing-heritage */
  --color-primary-hover:  #1e40af;  /* hover/pressed */
  --color-primary-muted:  rgba(30, 58, 138, 0.08);
  --color-primary-soft:   #dbeafe;  /* badge/chip bg */

  --color-accent:         #c2410c;  /* burnt orange — NACA test marker */
  --color-accent-hover:   #9a3412;
  --color-accent-muted:   rgba(194, 65, 12, 0.10);
  --color-accent-soft:    #ffedd5;

  /* ============ COLOR — SEMANTIC (Day) ============ */
  --color-success: #15803d;   /* VFR-green */
  --color-warning: #b45309;   /* MVFR-amber */
  --color-danger:  #b91c1c;   /* IFR-red */
  --color-info:    #1e3a8a;   /* royal-blue (= primary) */

  /* ============ SHADOWS (Day) — sparse, engineering-grade ============ */
  --shadow-sm:            0 1px 0 rgba(24, 24, 27, 0.04);
  --shadow-md:            0 2px 0 rgba(24, 24, 27, 0.06);
  --shadow-lg:            0 4px 24px rgba(24, 24, 27, 0.06);
  --shadow-glow-primary:  0 0 0 3px rgba(30, 58, 138, 0.18);
  --shadow-glow-accent:   0 0 0 3px rgba(194, 65, 12, 0.18);

  /* ============ EFFECTS — cursor trail (Day) ============ */
  --fx-primary:  #1e3a8a;
  --fx-accent:   #c2410c;
  --fx-soft:     #a8a29e;
}

/* ============================================================
   THEME — NIGHT
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #0c0a09;   /* stone-950 (warm midnight) */
    --color-bg-elevated:   #1c1917;   /* stone-900 */
    --color-surface:       #1c1917;
    --color-surface-hover: #292524;   /* stone-800 */
    --color-border:        #44403c;   /* stone-700 */
    --color-border-strong: #57534e;   /* stone-600 */
    --color-border-rule:   #e7e5e4;   /* light rule on dark */
    --color-border-active: #93c5fd;

    --color-text:          #fafaf5;
    --color-text-strong:   #ffffff;
    --color-text-muted:    #a8a29e;   /* stone-400 */
    --color-text-subtle:   #78716c;
    --color-text-inverse:  #18181b;

    --color-primary:        #93c5fd;   /* blue-300 — readable on dark */
    --color-primary-hover:  #bfdbfe;
    --color-primary-muted:  rgba(147, 197, 253, 0.14);
    --color-primary-soft:   rgba(147, 197, 253, 0.10);

    --color-accent:         #fb923c;   /* orange-400 */
    --color-accent-hover:   #fdba74;
    --color-accent-muted:   rgba(251, 146, 60, 0.14);
    --color-accent-soft:    rgba(251, 146, 60, 0.10);

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger:  #f87171;
    --color-info:    #93c5fd;

    --shadow-sm:            0 1px 0 rgba(0, 0, 0, 0.4);
    --shadow-md:            0 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-lg:            0 4px 24px rgba(0, 0, 0, 0.55);
    --shadow-glow-primary:  0 0 0 3px rgba(147, 197, 253, 0.22);
    --shadow-glow-accent:   0 0 0 3px rgba(251, 146, 60, 0.22);

    --fx-primary:  #93c5fd;
    --fx-accent:   #fb923c;
    --fx-soft:     #57534e;
  }
}

:root[data-theme="dark"] {
  --color-bg:            #0c0a09;
  --color-bg-elevated:   #1c1917;
  --color-surface:       #1c1917;
  --color-surface-hover: #292524;
  --color-border:        #44403c;
  --color-border-strong: #57534e;
  --color-border-rule:   #e7e5e4;
  --color-border-active: #93c5fd;

  --color-text:          #fafaf5;
  --color-text-strong:   #ffffff;
  --color-text-muted:    #a8a29e;
  --color-text-subtle:   #78716c;
  --color-text-inverse:  #18181b;

  --color-primary:        #93c5fd;
  --color-primary-hover:  #bfdbfe;
  --color-primary-muted:  rgba(147, 197, 253, 0.14);
  --color-primary-soft:   rgba(147, 197, 253, 0.10);

  --color-accent:         #fb923c;
  --color-accent-hover:   #fdba74;
  --color-accent-muted:   rgba(251, 146, 60, 0.14);
  --color-accent-soft:    rgba(251, 146, 60, 0.10);

  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger:  #f87171;
  --color-info:    #93c5fd;

  --shadow-sm:            0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-md:            0 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-lg:            0 4px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow-primary:  0 0 0 3px rgba(147, 197, 253, 0.22);
  --shadow-glow-accent:   0 0 0 3px rgba(251, 146, 60, 0.22);

  --fx-primary:  #93c5fd;
  --fx-accent:   #fb923c;
  --fx-soft:     #57534e;
}

/* ============================================================
   THEME-NEUTRAL TOKENS
   ============================================================ */
:root {
  /* ============ TYPOGRAPHY ============
   * Display + Body: Roboto Slab (self-hosted variable woff2, Latin subset).
   *                 One 34 KB file covers weights 100–900 via wght axis.
   *                 Fallbacks: paid slabs (Sentinel/Tisa), then system slabs
   *                 (PT Serif, Cambria, Constantia), then bridge serifs
   *                 (Charter, Georgia), then generic serif.
   * Mono:           SF Mono / ui-monospace — codes, labels, status pills.
   * `--font-family-sans` is kept as a legacy alias that resolves to the
   *  same slab, so old CSS rules don't break. UI elements that should NOT
   *  be slab must explicitly use `var(--font-family-mono)`.
   */
  --font-family-display: "Roboto Slab", "Sentinel", "Tisa", "PT Serif",
                         Cambria, Constantia, "Bitstream Charter", Charter,
                         Georgia, serif;

  --font-family-body:    "Roboto Slab", "Sentinel", "Tisa", "PT Serif",
                         Cambria, Constantia, "Bitstream Charter", Charter,
                         Georgia, serif;

  --font-family-sans:    var(--font-family-body); /* legacy alias */

  --font-family-mono:    ui-monospace, "SF Mono", "JetBrains Mono",
                         Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --font-size-xs:    0.75rem;    /* 12px */
  --font-size-sm:    0.85rem;    /* 14px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-lg:    1.2rem;     /* 19px — editorial body emphasis */
  --font-size-xl:    1.5rem;     /* 24px */
  --font-size-2xl:   2.25rem;    /* 36px */
  --font-size-3xl:   3rem;       /* 48px */
  --font-size-4xl:   4rem;       /* 64px */
  --font-size-5xl:   5.5rem;     /* 88px — hero display, editorial scale */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --line-height-tight:    1.05;   /* hero display serif */
  --line-height-snug:     1.2;    /* h2 serif */
  --line-height-relaxed:  1.4;    /* h3, lead paragraphs */
  --line-height-normal:   1.55;   /* body */
  --line-height-loose:    1.7;    /* long-form reading */

  /* Slab tracking — Roboto Slab is already wide; needs less negative tracking
     than sans, and uppercase wordmark uses only +0.03em (slab caps are roomy). */
  --letter-spacing-display:  -0.010em;  /* h1 slab display */
  --letter-spacing-tight:    -0.005em;  /* h2 slab */
  --letter-spacing-normal:    0;        /* slab body */
  --letter-spacing-mono-tight: -0.01em; /* mono labels */
  --letter-spacing-caps:      0.03em;   /* uppercase wordmark in slab */
  --letter-spacing-eyebrow:   0.16em;   /* mono eyebrow / section codes */
  --letter-spacing-wide:      0.22em;   /* status pills, page-numbers */

  /* ============ SPACING (8px grid) ============ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  /* ============ RADIUS — sharp, engineering-drawing scale ============ */
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    6px;
  --radius-xl:    8px;
  --radius-full: 999px;

  /* ============ LAYOUT ============ */
  --layout-max-width:    1180px;   /* slightly wider for editorial 12-col */
  --layout-content-pad:  1.25rem;
  --layout-nav-height:   64px;
  --layout-rule-weight:  1px;
  --layout-rule-strong:  2px;

  /* ============ TRANSITIONS ============ */
  --t-fast: 0.10s ease;
  --t-base: 0.18s ease;
  --t-slow: 0.30s ease;

  /* ============ Z-INDEX ============ */
  --z-base:   1;
  --z-sticky: 50;
  --z-modal:  100;
  --z-toast:  150;

  /* ============ EFFECTS ============ */
  --fx-spawn-rate:    0.4;
  --fx-particle-life: 1100;

  /* ============ CARD ============ */
  --card-min-height: 240px;
  --card-desc-lines: 3;
  --card-padding:    var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --t-slow: 0.01ms;
  }
}