/* ==========================================================================
   TRILOT — DESIGN TOKENS
   Registered custom properties turn colours, angles and progress values into
   animatable, interpolatable primitives. Everything downstream composes them.
   ========================================================================== */

/* --- Animatable primitives ------------------------------------------------ */
@property --ink-angle   { syntax: '<angle>';      inherits: true;  initial-value: 0deg; }
@property --wash        { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --reveal      { syntax: '<number>';     inherits: false; initial-value: 0; }
@property --rule        { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --glow        { syntax: '<number>';     inherits: false; initial-value: 0; }
@property --lift        { syntax: '<length>';     inherits: false; initial-value: 0px; }
@property --sat         { syntax: '<number>';     inherits: false; initial-value: 0; }

/* --- Palette -------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ink: the warm-black paper the whole site is printed on */
  --ink-950: oklch(0.135 0.006 65);
  --ink-900: oklch(0.165 0.007 65);
  --ink-850: oklch(0.195 0.008 65);
  --ink-800: oklch(0.235 0.009 65);
  --ink-700: oklch(0.310 0.010 65);
  --ink-600: oklch(0.420 0.010 65);
  --ink-500: oklch(0.560 0.010 70);

  /* the three brushstrokes */
  --sage: oklch(0.780 0.108 158);
  --rust: oklch(0.700 0.168 42);
  --sky:  oklch(0.760 0.112 232);

  /* semantic surfaces */
  --bg:          var(--ink-950);
  --bg-raised:   var(--ink-900);
  --bg-sunken:   oklch(0.115 0.005 65);
  --surface:     color-mix(in oklab, var(--ink-800) 72%, transparent);
  --surface-2:   color-mix(in oklab, var(--ink-700) 55%, transparent);

  /* semantic text */
  --fg:        oklch(0.955 0.008 90);
  --fg-muted:  oklch(0.760 0.010 85);
  --fg-faint:  oklch(0.590 0.010 80);

  /* hairline rules */
  --line:        color-mix(in oklab, var(--fg) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--fg) 26%, transparent);

  /* accent: the composite of all three strokes */
  --accent: var(--sage);
  --accent-ink: oklch(0.20 0.03 158);

  --focus: oklch(0.86 0.15 90);
  --shadow: 0 1px 1px oklch(0 0 0 / 0.28), 0 8px 24px -12px oklch(0 0 0 / 0.55);
  --shadow-lift: 0 32px 80px -40px oklch(0 0 0 / 0.85), 0 2px 8px oklch(0 0 0 / 0.3);

  --grain-opacity: 0.42;
  --grain-blend: soft-light;
}

/* Paper mode — the same layout, printed on cream stock. */
[data-theme='light'] {
  color-scheme: light;

  --bg:        oklch(0.964 0.012 92);
  --bg-raised: oklch(0.986 0.008 92);
  --bg-sunken: oklch(0.936 0.014 92);
  --surface:   color-mix(in oklab, oklch(0.90 0.02 92) 55%, transparent);
  --surface-2: color-mix(in oklab, oklch(0.86 0.03 92) 60%, transparent);

  --fg:       oklch(0.235 0.014 62);
  --fg-muted: oklch(0.430 0.014 62);
  --fg-faint: oklch(0.560 0.012 62);

  --line:        color-mix(in oklab, var(--fg) 16%, transparent);
  --line-strong: color-mix(in oklab, var(--fg) 32%, transparent);

  --sage: oklch(0.520 0.108 158);
  --rust: oklch(0.545 0.170 40);
  --sky:  oklch(0.520 0.130 240);

  --accent: var(--sage);
  --accent-ink: oklch(0.97 0.02 158);

  --shadow: 0 1px 2px oklch(0.4 0.03 70 / 0.10), 0 12px 32px -18px oklch(0.4 0.03 70 / 0.35);
  --shadow-lift: 0 40px 90px -50px oklch(0.35 0.04 60 / 0.55), 0 2px 6px oklch(0.4 0.03 70 / 0.12);

  --grain-opacity: 0.30;
  --grain-blend: multiply;
}

/* --- Typography ----------------------------------------------------------- */
:root {
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* fluid ramp — calibrated so the display sizes never collide on small screens */
  --step--2: clamp(0.694rem, 0.678rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.806rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem,    0.958rem + 0.21vw, 1.125rem);
  --step-1:  clamp(1.2rem,  1.12rem  + 0.40vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.30rem  + 0.72vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.48rem  + 1.24vw, 2.75rem);
  --step-4:  clamp(2.07rem, 1.62rem  + 2.26vw, 4.05rem);
  --step-5:  clamp(2.49rem, 1.62rem  + 4.36vw, 6.4rem);
  --step-6:  clamp(2.99rem, 1.10rem  + 9.44vw, 11rem);

  --leading-display: 0.92;
  --leading-tight: 1.14;
  --leading-body: 1.62;
  --tracking-display: -0.028em;
  --tracking-tight: -0.014em;
  --tracking-wide: 0.06em;
  --tracking-mono: 0.16em;

  --weight-light: 300;
  --weight-body: 380;
  --weight-medium: 500;
}

/* --- Space, shape, motion ------------------------------------------------- */
:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  --space-2xl: clamp(4rem, 2.4rem + 6.4vw, 9rem);
  --space-3xl: clamp(6rem, 3rem + 12vw, 16rem);

  --gutter: clamp(1.25rem, 4.2vw, 5rem);
  --measure: 68ch;
  --maxw: 96rem;

  --radius-xs: 2px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --radius-pill: 999px;

  --dur-instant: 90ms;
  --dur-fast: 190ms;
  --dur: 420ms;
  --dur-slow: 760ms;
  --dur-glacial: 1400ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-glide: cubic-bezier(0.4, 0.02, 0.02, 1);
  /* a physical spring, sampled — powers every "settle" in the UI */
  --ease-spring: linear(
    0, 0.0039 1.1%, 0.0177 2.4%, 0.0685 4.7%, 0.1632 7.7%, 0.3007 11.3%,
    0.4873 15.7%, 0.6854 20.3%, 0.8288 24.7%, 0.9312 29.4%, 0.9944 34.4%,
    1.0298 39.7%, 1.0459 45.5%, 1.0486 51.1%, 1.0433 56.4%, 1.0337 61.6%,
    1.0229 66.9%, 1.0123 72.6%, 1.0044 79.4%, 1.0004 86.3%, 1 100%
  );
  --ease-ink: cubic-bezier(0.83, 0, 0.17, 1);

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 40;
  --z-nav: 120;
  --z-drawer: 200;
  --z-cursor: 9000;
  --z-grain: 8500;
  --z-preloader: 9500;
  --z-skip: 9999;
}

/* Accent variants — a card can carry one brushstroke without new classes. */
[data-ink='sage'] { --accent: var(--sage); --accent-ink: oklch(0.22 0.04 158); }
[data-ink='rust'] { --accent: var(--rust); --accent-ink: oklch(0.24 0.06 42); }
[data-ink='sky']  { --accent: var(--sky);  --accent-ink: oklch(0.24 0.05 232); }
[data-ink='bone'] { --accent: var(--fg);   --accent-ink: var(--bg); }

@media (prefers-contrast: more) {
  :root { --line: color-mix(in oklab, var(--fg) 34%, transparent); --fg-muted: var(--fg); }
}