/* ================================================================
   berliney · design tokens
   ----------------------------------------------------------------
   Distilled from the berliney design system (Design System Studio
   export). Two primitive ramps + the semantic layer this site uses.
   Components never reference raw hex — semantic tokens only.
   ================================================================ */

:root {
  /* ── primitives · noir shade (base #20201E at 950) ── */
  --noir-50: #e6e6e5;
  --noir-100: #d9d9d7;
  --noir-200: #c6c6c5;
  --noir-300: #afafae;
  --noir-400: #979795;
  --noir-500: #7f7f7d;
  --noir-600: #676765;
  --noir-700: #51514f;
  --noir-800: #3e3e3c;
  --noir-900: #2e2e2c;
  --noir-950: #20201e;

  /* ── primitives · rose wisp (base #E43287 at 500) ── */
  --rose-50: #ffdbe6;
  --rose-100: #ffc8da;
  --rose-200: #ffacc9;
  --rose-300: #ff86b4;
  --rose-400: #fb569d;
  --rose-500: #e43287;
  --rose-600: #c40a6f;
  --rose-700: #9e0057;
  --rose-800: #7c0043;
  --rose-900: #5f0032;
  --rose-950: #470023;

  /* ── primitives · red (error family) ── */
  --red-50: #fddfd8;
  --red-100: #fbcfc5;
  --red-200: #f9b6a6;
  --red-300: #f7967d;
  --red-400: #f46f4d;
  --red-500: #ec3b0f;
  --red-600: #c52700;
  --red-700: #9c1f00;
  --red-800: #7b1900;
  --red-900: #5d1300;
  --red-950: #460e00; /* derived — same 900→950 ratio as rose */

  /* ── primitives · green (success family) ── */
  --green-50: #c1f1da;
  --green-100: #9fe9c6;
  --green-200: #68dba5;
  --green-300: #2fc780;
  --green-400: #28ab6e;
  --green-500: #22905c;
  --green-600: #00763f;
  --green-700: #005d32;
  --green-800: #004827;
  --green-900: #00351d;
  --green-950: #002816; /* derived — same 900→950 ratio as rose */

  /* ── semantic · color ── */
  --color-bg-ink-mode: var(--noir-950);
  --color-surface-base: var(--noir-50);
  --color-surface-base-dim: #f0eee8;
  --color-surface-raised: #ffffff;

  --color-text-primary: var(--noir-950);
  --color-text-soft: var(--noir-800);
  --color-text-muted: var(--noir-700);
  --color-text-subtle: var(--noir-600);
  --color-text-inverse: var(--color-surface-base-dim);

  --color-primary-strong: var(--noir-950);

  --color-accent-strong: var(--rose-600); /* accent text on light */
  --color-accent-on-dark: var(--rose-300); /* text on noir: AA-safe */

  --color-error-base: var(--red-600);
  --color-success-base: var(--green-600);
  --color-focus-ring: var(--rose-500);

  --color-border-subtle: var(--noir-200);

  /* signature: rose highlighter wash */
  --color-highlight: color-mix(in srgb, var(--rose-500) 38%, transparent);

  /* ── semantic · type ── */
  --font-display: 'Eveleth', ui-serif, Georgia, serif;
  --font-accent: 'Eveleth Clean', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (design-system t-h1…t-h6 + body steps).
     H4 (24px) is the smallest display step — Eveleth's texture
     collapses below 24px, so h5/h6 switch families per the DS. */
  --text-h1: clamp(2.75rem, 6vw, 4rem); /* 44–64px · display */
  --text-h2: 2.75rem; /* 44px · display */
  --text-h3: 2rem; /* 32px · display */
  --text-h4: 1.5rem; /* 24px · display floor */
  --text-h5: 1.125rem; /* 18px · body face */
  --text-h6: 0.8125rem; /* 13px · label/mono style */
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-small: 0.8125rem;
  --text-label: 0.875rem;
  --leading-heading: 1.3;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;

  /* ── semantic · space (design-system scale) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── semantic · shape (sharp, poster-like) ── */
  --radius-small: 0px;
  --radius-medium: 2px;
  --radius-large: 4px;
  --radius-pill: 999px;

  /* ── semantic · motion ── */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── component · button ──
     Hover flips ink → rose (the brand move); pressed stays in the
     rose family with ink text so the label never flickers.
     Contrast: rose-500 + ink is only 3.97:1 (fails AA at label size),
     so interactive fills use rose-400 (5.4:1) and rose-300 (7.2:1). */
  --button-radius: var(--radius-pill);
  --button-primary-bg-default: var(--noir-950);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-bg-hover: var(--rose-400);
  --button-primary-text-hover: var(--noir-950);
  --button-primary-bg-pressed: var(--rose-300);
  --button-secondary-fg: var(--noir-950);
  --button-secondary-border: var(--noir-950);
  --button-secondary-bg-hover: var(--noir-950);
  --button-secondary-fg-hover: var(--color-text-inverse);
  --button-secondary-bg-pressed: var(--noir-900);
  --button-link-fg: inherit;
  --button-link-fg-hover: var(--color-accent-strong);
  --button-disabled-bg: var(--noir-100);
  --button-disabled-fg: var(--noir-600);
  --button-disabled-border: var(--noir-200);

  /* ── component · field ──
     Solid paper fill so text always reads at AA on any surface;
     placeholder noir-600 on white = 4.95:1. */
  --field-bg: var(--color-surface-raised);
  --field-fg: var(--noir-950);
  --field-border: var(--noir-950);
  --field-placeholder: var(--noir-600);
  --field-radius: var(--radius-small);
  --field-error: var(--red-800); /* separates from rose by darkness; shown at 3px weight */
  --field-error-text: var(--red-700); /* on paper: 8.6:1 */
  --field-disabled-bg: var(--noir-100);
  --field-disabled-fg: var(--noir-600);
  --field-disabled-border: var(--noir-300);
}