/*
 * Design tokens. Colours are OKLCH so lightness steps look even across hues.
 * light-dark() picks the value for the active colour scheme (follows the OS).
 * Shades are derived with color-mix() instead of hard-coded scales. Mixing happens
 * in oklab: oklch would interpolate the hue towards the 0° of achromatic colours
 * (white, black, transparent) and tint everything pink.
 */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Neutrals: warm paper and stone */
    --color-bg:             light-dark(oklch(98.4% 0.006 85), oklch(17.5% 0.008 70));
    --color-surface:        light-dark(oklch(100% 0 0),       oklch(21.5% 0.009 70));
    --color-surface-sunken: light-dark(oklch(96.2% 0.009 85), oklch(15.5% 0.007 70));
    --color-border:         light-dark(oklch(91% 0.01 80),    oklch(29% 0.01 70));
    --color-border-strong:  light-dark(oklch(83% 0.013 78),   oklch(40% 0.012 70));
    --color-text:           light-dark(oklch(24% 0.014 60),   oklch(94% 0.008 80));
    --color-text-muted:     light-dark(oklch(47% 0.016 65),   oklch(73% 0.012 75));

    /* Accent: deep sage, calm and trustworthy */
    --color-accent:         light-dark(oklch(45% 0.065 155),  oklch(79% 0.075 152));
    --color-on-accent:      light-dark(oklch(98.5% 0.008 120), oklch(19% 0.025 155));
    --color-accent-subtle:  color-mix(in oklab, var(--color-accent) 11%, var(--color-surface));

    /* Highlight: champagne, used sparingly for decorative touches */
    --color-highlight:      light-dark(oklch(74% 0.095 78),   oklch(80% 0.09 80));

    /* Status */
    --color-success:        light-dark(oklch(50% 0.12 150),   oklch(77% 0.13 150));
    --color-warning:        light-dark(oklch(58% 0.13 70),    oklch(82% 0.13 80));
    --color-danger:         light-dark(oklch(52% 0.17 27),    oklch(72% 0.15 25));

    --color-focus: color-mix(in oklab, var(--color-accent) 55%, transparent);

    /* Typography */
    --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Fraunces Variable", ui-serif, "Iowan Old Style", Georgia, serif;

    /* Fluid type scale (1.2 → 1.25 ratio between 320px and 1280px viewports) */
    --step--1: clamp(0.833rem, 0.81rem + 0.1vw, 0.889rem);
    --step-0:  clamp(1rem, 0.96rem + 0.21vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.406rem);
    --step-2:  clamp(1.44rem, 1.33rem + 0.56vw, 1.758rem);
    --step-3:  clamp(1.728rem, 1.56rem + 0.85vw, 2.197rem);
    --step-4:  clamp(2.074rem, 1.82rem + 1.26vw, 2.747rem);
    --step-5:  clamp(2.488rem, 2.12rem + 1.84vw, 3.433rem);

    /* Fluid space scale */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
    --space-2xs: clamp(0.5rem, 0.48rem + 0.1vw, 0.55rem);
    --space-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
    --space-s:   clamp(1rem, 0.96rem + 0.21vw, 1.125rem);
    --space-m:   clamp(1.5rem, 1.44rem + 0.31vw, 1.7rem);
    --space-l:   clamp(2rem, 1.92rem + 0.42vw, 2.25rem);
    --space-xl:  clamp(3rem, 2.88rem + 0.63vw, 3.375rem);
    --space-2xl: clamp(4rem, 3.5rem + 2.5vw, 5.5rem);
    --space-3xl: clamp(6rem, 5.25rem + 3.75vw, 8.25rem);

    --gutter: var(--space-s);
    --measure: 65ch;

    /* Shape */
    --radius-s: 0.375rem;
    --radius-m: 0.625rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 999px;
    --border-width: 1px;

    /* Elevation: layered, low-contrast shadows that read in both schemes */
    --shadow-color: light-dark(oklch(35% 0.02 70 / 0.08), oklch(0% 0 0 / 0.45));
    --shadow-s: 0 1px 2px var(--shadow-color);
    --shadow-m: 0 1px 2px var(--shadow-color), 0 4px 12px -2px var(--shadow-color);
    --shadow-l: 0 1px 2px var(--shadow-color), 0 12px 32px -8px var(--shadow-color), 0 24px 48px -16px var(--shadow-color);

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;

    --focus-ring: 0 0 0 3px var(--color-focus);
  }
}