/* =============================================================
   tokens.css — single source of truth for Stetz valuation app
   All raw values live HERE. index.html uses var() only.
   ============================================================= */

/* ── Dark theme (default) ── */
:root {
  /* Core palette */
  --color-bg: oklch(0.165 0.008 60);
  --color-fg: oklch(0.95 0.008 80);
  --color-accent: oklch(0.76 0.165 55);
  --color-up: oklch(0.8 0.12 190);
  --color-down: oklch(0.7 0.17 25);
  --color-amber: oklch(0.84 0.13 95);

  /* Derived semantic colours */
  --color-card: oklch(0.21 0.009 60);
  --color-muted: oklch(0.68 0.01 70); /* AA on --color-bg ✓ */
  --color-border: oklch(0.3 0.01 60);
  --color-accent-fg: oklch(0.12 0.006 60); /* dark text on amber/gold accent */

  /* Shadows — dark */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.18);
  --shadow-lg:
    0 1px 0 oklch(1 0 0 / 0.04) inset, 0 24px 60px -24px oklch(0 0 0 / 0.6),
    0 2px 8px oklch(0 0 0 / 0.3);
}

/* ── Light theme — media query ── */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: oklch(0.975 0.006 80);
    --color-fg: oklch(0.2 0.012 60);
    --color-accent: oklch(0.55 0.16 48);
    --color-up: oklch(0.5 0.1 190); /* -0.08 lightness */
    --color-down: oklch(0.53 0.18 25); /* -0.08 lightness */
    --color-amber: oklch(0.52 0.12 85);

    --color-card: oklch(0.945 0.007 75);
    --color-muted: oklch(0.46 0.012 65); /* AA on light bg ✓ */
    --color-border: oklch(0.84 0.009 70);
    --color-accent-fg: oklch(0.98 0.004 80);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08);
    --shadow-lg:
      0 1px 0 oklch(1 0 0 / 0.8) inset, 0 24px 60px -24px oklch(0 0 0 / 0.18),
      0 2px 8px oklch(0 0 0 / 0.08);
  }
}

/* ── Manual class overrides (beat media query — placed after) ── */
html.light {
  --color-bg: oklch(0.975 0.006 80);
  --color-fg: oklch(0.2 0.012 60);
  --color-accent: oklch(0.55 0.16 48);
  --color-up: oklch(0.5 0.1 190);
  --color-down: oklch(0.53 0.18 25);
  --color-amber: oklch(0.52 0.12 85);

  --color-card: oklch(0.945 0.007 75);
  --color-muted: oklch(0.46 0.012 65);
  --color-border: oklch(0.84 0.009 70);
  --color-accent-fg: oklch(0.98 0.004 80);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08);
  --shadow-lg:
    0 1px 0 oklch(1 0 0 / 0.8) inset, 0 24px 60px -24px oklch(0 0 0 / 0.18),
    0 2px 8px oklch(0 0 0 / 0.08);
}

html.dark {
  --color-bg: oklch(0.165 0.008 60);
  --color-fg: oklch(0.95 0.008 80);
  --color-accent: oklch(0.76 0.165 55);
  --color-up: oklch(0.8 0.12 190);
  --color-down: oklch(0.7 0.17 25);
  --color-amber: oklch(0.84 0.13 95);

  --color-card: oklch(0.21 0.009 60);
  --color-muted: oklch(0.68 0.01 70);
  --color-border: oklch(0.3 0.01 60);
  --color-accent-fg: oklch(0.12 0.006 60);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.18);
  --shadow-lg:
    0 1px 0 oklch(1 0 0 / 0.04) inset, 0 24px 60px -24px oklch(0 0 0 / 0.6),
    0 2px 8px oklch(0 0 0 / 0.3);
}

/* ── Typography ── */
:root {
  --font-sans: "Schibsted Grotesk", system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
}

/* ── Spacing — strict 8-pt grid ── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ── Radii ── */
:root {
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
}

/* ── Motion ── */
:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;
}

/* ── Reduced-motion override ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}