/* Polymath Industrial — Design Tokens
 * Aesthetic: Dark industrial, Montana earth tones.
 * Palette: deep slate ground, bone foreground, rust + forest accents.
 */

:root {
  /* ── Earth-tone palette ─────────────────────────────────────────── */
  /* Grounds (dark) */
  --ground-0: #0e1012;          /* deepest - page background */
  --ground-1: #14181b;          /* surface - cards, panels */
  --ground-2: #1c2126;          /* elevated surface */
  --ground-3: #262c33;          /* borders, dividers */
  --ground-4: #3a424b;          /* muted borders */

  /* Foregrounds (bone / ivory) */
  --bone-0:   #f4ede0;          /* primary text - warm bone */
  --bone-1:   #ddd4c2;          /* secondary text */
  --bone-2:   #a8a092;          /* tertiary, captions */
  --bone-3:   #6e6a60;          /* disabled, faint */

  /* Accents */
  --rust:        #b8542a;       /* primary accent - oxidized copper/rust */
  --rust-bright: #d9683a;       /* hover, highlights */
  --rust-deep:   #8a3d1d;       /* pressed states */

  --forest:        #4a6b4a;     /* secondary accent - lodgepole pine */
  --forest-bright: #6b8a6b;
  --forest-deep:   #324832;

  --sage:        #8a9579;       /* tertiary - dry sage */
  --bone-warm:   #c9a87c;       /* highlight tone - dried grass */

  /* Semantic */
  --bg:          var(--ground-0);
  --bg-elev:     var(--ground-1);
  --bg-elev-2:   var(--ground-2);
  --border:      var(--ground-3);
  --border-soft: var(--ground-4);
  --fg:          var(--bone-0);
  --fg-dim:      var(--bone-1);
  --fg-mute:     var(--bone-2);
  --fg-faint:    var(--bone-3);
  --accent:      var(--rust);
  --accent-hi:   var(--rust-bright);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* Scale (modular, 1.25 ratio anchored at 16px) */
  --fs-xs:    0.75rem;     /* 12px */
  --fs-sm:    0.875rem;    /* 14px */
  --fs-base:  1rem;        /* 16px */
  --fs-md:    1.125rem;    /* 18px */
  --fs-lg:    1.375rem;    /* 22px */
  --fs-xl:    1.75rem;     /* 28px */
  --fs-2xl:   2.25rem;     /* 36px */
  --fs-3xl:   3rem;        /* 48px */
  --fs-4xl:   4.25rem;     /* 68px */
  --fs-5xl:   6rem;        /* 96px */

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;

  /* Leading */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  /* ── Spacing ────────────────────────────────────────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Effects ────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    600ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}