/* ============================================================
   DESIGN TOKENS
   oklch() throughout – perceptually uniform color space
   @layer: tokens → base → layout → components → utils
   ============================================================ */

@layer tokens {

  :root {
    /* --- Palette: warm earth / Mittelrhein --- */

    /* Terrakotta (primary accent) */
    --terra-50:  oklch(97% 0.02 42);
    --terra-100: oklch(93% 0.05 42);
    --terra-200: oklch(85% 0.10 42);
    --terra-300: oklch(74% 0.15 42);
    --terra-400: oklch(63% 0.18 42);
    --terra-500: oklch(52% 0.20 42);   /* primary */
    --terra-600: oklch(43% 0.18 42);
    --terra-700: oklch(34% 0.15 42);
    --terra-800: oklch(25% 0.10 42);
    --terra-900: oklch(17% 0.06 42);

    /* Forest green (secondary) */
    --forest-50:  oklch(97% 0.02 150);
    --forest-100: oklch(92% 0.05 150);
    --forest-200: oklch(83% 0.09 150);
    --forest-300: oklch(71% 0.13 150);
    --forest-400: oklch(58% 0.16 150);
    --forest-500: oklch(47% 0.17 150);  /* secondary */
    --forest-600: oklch(38% 0.14 150);
    --forest-700: oklch(29% 0.11 150);
    --forest-800: oklch(21% 0.08 150);

    /* Stone neutrals (warm gray, paper-like) */
    --stone-50:  oklch(98.5% 0.005 80);
    --stone-100: oklch(95.5% 0.010 80);
    --stone-200: oklch(90%   0.015 80);
    --stone-300: oklch(82%   0.018 80);
    --stone-400: oklch(70%   0.018 80);
    --stone-500: oklch(57%   0.016 80);
    --stone-600: oklch(45%   0.014 80);
    --stone-700: oklch(33%   0.012 80);
    --stone-800: oklch(23%   0.010 80);
    --stone-900: oklch(14%   0.008 80);

    /* Sky blue (info/links) */
    --sky-400: oklch(70% 0.14 240);
    --sky-500: oklch(58% 0.17 240);
    --sky-600: oklch(46% 0.16 240);

    /* Status */
    --ok-color:      oklch(52% 0.16 148);
    --warn-color:    oklch(67% 0.18 65);
    --closed-color:  oklch(52% 0.20 30);
    --ok-bg:         oklch(94% 0.06 148);
    --warn-bg:       oklch(96% 0.06 65);
    --closed-bg:     oklch(96% 0.05 30);

    /* --- Semantic tokens (light mode) --- */
    --bg-page:        var(--stone-50);
    --bg-surface:     oklch(100% 0 0);
    --bg-surface-alt: var(--stone-100);
    --bg-sunken:      var(--stone-200);

    --text-primary:   var(--stone-900);
    --text-secondary: var(--stone-600);
    --text-tertiary:  var(--stone-400);
    --text-on-accent: oklch(100% 0 0);

    --accent:         var(--terra-500);
    --accent-hover:   var(--terra-600);
    --accent-subtle:  var(--terra-50);
    --accent-border:  var(--terra-200);

    --secondary:      var(--forest-500);
    --secondary-subtle: var(--forest-50);

    --border:         var(--stone-200);
    --border-strong:  var(--stone-300);

    --link:           var(--sky-600);
    --link-hover:     var(--sky-500);

    --shadow-sm: 0 1px 3px oklch(14% 0.01 80 / 0.08),
                 0 1px 2px oklch(14% 0.01 80 / 0.06);
    --shadow-md: 0 4px 12px oklch(14% 0.01 80 / 0.10),
                 0 2px 6px  oklch(14% 0.01 80 / 0.06);
    --shadow-lg: 0 16px 40px oklch(14% 0.01 80 / 0.16),
                 0 6px 16px  oklch(14% 0.01 80 / 0.08);
    --shadow-modal: 0 24px 80px oklch(14% 0.01 80 / 0.30);

    /* --- Typography --- */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Source Serif 4', 'Georgia', serif;
    --font-mono:    'Fira Code', 'Consolas', monospace;

    /* --- Spacing (4px grid) --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* --- Radii --- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* --- Motion --- */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:   120ms;
    --duration-base:   220ms;
    --duration-slow:   380ms;
    --duration-modal:  450ms;

    /* --- Safe areas (Xiaomi 13T / notch) --- */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* --- Breakpoint (two-mode layout: mobile / desktop) --- */
    --bp-desktop: 900px;
  }

  html[data-theme='dark'] body {
    --bg-page:        oklch(12% 0.010 80);
    --bg-surface:     oklch(17% 0.012 80);
    --bg-surface-alt: oklch(21% 0.012 80);
    --bg-sunken:      oklch(10% 0.008 80);

    --text-primary:   oklch(94% 0.005 80);
    --text-secondary: oklch(65% 0.010 80);
    --text-tertiary:  oklch(45% 0.010 80);
    --text-on-accent: oklch(100% 0 0);

    --accent:         var(--terra-400);
    --accent-hover:   var(--terra-300);
    --accent-subtle:  oklch(20% 0.06 42);
    --accent-border:  oklch(28% 0.08 42);

    --secondary:      var(--forest-400);
    --secondary-subtle: oklch(20% 0.06 150);

    --border:         oklch(26% 0.012 80);
    --border-strong:  oklch(32% 0.012 80);

    --link:           var(--sky-400);
    --link-hover:     oklch(76% 0.13 240);

    --ok-bg:     oklch(18% 0.06 148);
    --warn-bg:   oklch(18% 0.06 65);
    --closed-bg: oklch(18% 0.05 30);

    --shadow-sm: 0 1px 3px oklch(5% 0 0 / 0.3);
    --shadow-md: 0 4px 12px oklch(5% 0 0 / 0.4);
    --shadow-lg: 0 16px 40px oklch(5% 0 0 / 0.5);
    --shadow-modal: 0 24px 80px oklch(5% 0 0 / 0.7);
  }

  /* Dark mode when nothing was manually chosen */
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) body {
      --bg-page:        oklch(12% 0.010 80);
      --bg-surface:     oklch(17% 0.012 80);
      --bg-surface-alt: oklch(21% 0.012 80);
      --bg-sunken:      oklch(10% 0.008 80);

      --text-primary:   oklch(94% 0.005 80);
      --text-secondary: oklch(65% 0.010 80);
      --text-tertiary:  oklch(45% 0.010 80);
      --text-on-accent: oklch(100% 0 0);

      --accent:         var(--terra-400);
      --accent-hover:   var(--terra-300);
      --accent-subtle:  oklch(20% 0.06 42);
      --accent-border:  oklch(28% 0.08 42);

      --secondary:      var(--forest-400);
      --secondary-subtle: oklch(20% 0.06 150);

      --border:         oklch(26% 0.012 80);
      --border-strong:  oklch(32% 0.012 80);

      --link:           var(--sky-400);
      --link-hover:     oklch(76% 0.13 240);

      --ok-bg:     oklch(18% 0.06 148);
      --warn-bg:   oklch(18% 0.06 65);
      --closed-bg: oklch(18% 0.05 30);

      --shadow-sm: 0 1px 3px oklch(5% 0 0 / 0.3);
      --shadow-md: 0 4px 12px oklch(5% 0 0 / 0.4);
      --shadow-lg: 0 16px 40px oklch(5% 0 0 / 0.5);
      --shadow-modal: 0 24px 80px oklch(5% 0 0 / 0.7);
    }
  }
}