/* =============================================================================
   Open Atlas – design tokens
   All colors, typography, spacing, radii, shadows, and motion live here.
   Pages and components should only reference these variables.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --bg-base: #0b0d0e;
  --bg-surface: #141719;
  --bg-elevated: #1d2124;
  --bg-glass: rgba(13, 15, 16, 0.72);
  --border-subtle: #2a2f33;
  --border-strong: #3a4045;

  /* ---- Color: text ---- */
  --text-primary: #f1f3f4;
  --text-secondary: #a7adb2;
  --text-muted: #6c7378;
  --text-inverse: #0b0d0e;

  /* ---- Color: accents ---- */
  --accent-ember: #e5772f;
  --accent-ember-bright: #ff8a3d;
  --accent-ember-dim: #a04e1c;
  --accent-moss: #6ca57a;
  --accent-moss-dim: #3f6a4d;
  --accent-sky: #4ea9c7;
  --accent-sky-dim: #2a6c80;
  --accent-sand: #e6c58a;

  /* ---- Gradients ---- */
  --grad-sunrise: linear-gradient(120deg, #e5772f 0%, #ffb558 100%);
  --grad-dusk: linear-gradient(180deg, rgba(11, 13, 14, 0) 0%, rgba(11, 13, 14, 0.85) 70%, var(--bg-base) 100%);
  --grad-ridge: linear-gradient(180deg, rgba(11, 13, 14, 0.2) 0%, rgba(11, 13, 14, 0.55) 55%, rgba(11, 13, 14, 0.92) 100%);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2.125rem;
  --fs-4xl: clamp(2rem, 3.5vw + 1rem, 3.75rem);
  --fs-5xl: clamp(2.25rem, 6vw + 1rem, 5.25rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  /* ---- Spacing (8px baseline) ---- */
  --sp-0: 0;
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 5rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Layout ---- */
  --container-max: 72rem;     /* 1152px  */
  --container-wide: 84rem;    /* 1344px  */
  --container-narrow: 48rem;  /* 768px   */
  --section-py: clamp(4rem, 8vw, 8rem);

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px rgba(229, 119, 47, 0.35), 0 12px 36px rgba(229, 119, 47, 0.2);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-ember);

  color-scheme: dark;
}

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