/* ============================================================
   COLORS — Lukas Klein
   Editorial: warm paper + ink, anchored by one saturated
   International Klein Blue (IKB) — the "Klein" in the name.
   Flat, high-contrast, no gradients. Alias layer is stable.
   ============================================================ */
:root {
  /* --- Neutrals: warm ink / paper scale --- */
  --ink-950: #15130D; /* near-black warm ink — primary text */
  --ink-900: #201D15; /* strong frames / rules */
  --ink-800: #2E2A1F;
  --ink-700: #45402F; /* body copy */
  --ink-600: #6B6553; /* muted / secondary */
  --ink-500: #8A836E;
  --ink-400: #A8A08A; /* faint / placeholder */
  --ink-300: #C6BEA9; /* strong hairline */
  --ink-200: #DAD2BF; /* hairline border */
  --ink-150: #E4DCCB;
  --ink-100: #ECE5D5; /* dividers / track */
  --ink-50:  #F1EBDC; /* raised surface tint */
  --paper:      #F4F0E6; /* warm paper — page background */
  --paper-card: #FCFAF3; /* warm white — card surface */
  --white:   #FFFFFF;

  /* --- Accent: International Klein Blue --- */
  --klein:      #002FA7; /* IKB — primary accent */
  --klein-deep: #001E6B;
  --blue-800: #001E6B;
  --blue-700: #00268A;
  --blue-600: #002FA7; /* primary accent */
  --blue-500: #1C43C4; /* links on paper */
  --blue-200: #A9B7E4;
  --blue-100: #D7DEF2;
  --blue-50:  #ECEFF9;

  /* --- Semantic (earthy, muted to sit on paper) --- */
  --green-600: #2E6B45;
  --green-100: #DEE7DA;
  --amber-600: #94661A;
  --amber-100: #EEE3C9;
  --red-600:   #A83A2C;
  --red-100:   #EFDACF;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  /* Text */
  --text-strong:  var(--ink-950);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-600);
  --text-faint:   var(--ink-400);
  --text-invert:  var(--paper);
  --text-accent:  var(--blue-600);
  --text-link:    var(--blue-600);

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper-card);
  --surface-raised: var(--ink-50);
  --surface-dark:   var(--ink-950);
  --surface-accent: var(--blue-600);

  /* Borders */
  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-frame:    var(--ink-900); /* editorial strong frame */
  --border-dark:     var(--ink-800);
  --border-focus:    var(--blue-600);

  /* Interactive accent states */
  --accent:          var(--blue-600);
  --accent-hover:    var(--blue-700);
  --accent-active:   var(--blue-800);
  --accent-soft:     var(--blue-50);
  --accent-soft-bd:  var(--blue-200);

  /* Focus ring */
  --ring: 0 0 0 3px var(--blue-100);
}

/* ============================================================
   TYPOGRAPHY — Lukas Klein
   Bricolage Grotesque for display/headings; Hanken Grotesk for
   text + UI; JetBrains Mono for eyebrows / labels / code.
   ============================================================ */
:root {
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extra:    800; /* @kind other */

  /* Type scale — display down to micro */
  --fs-display:  clamp(2.75rem, 1.4rem + 5.2vw, 5rem); /* @kind other */
  --fs-h1:       clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem); /* @kind other */
  --fs-h2:       clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* @kind other */
  --fs-h3:       1.5rem;    /* @kind other */
  --fs-h4:       1.25rem;   /* @kind other */
  --fs-lead:     1.1875rem; /* @kind other */
  --fs-body:     1.0625rem; /* @kind other */
  --fs-sm:       0.9375rem; /* @kind other */
  --fs-xs:       0.8125rem; /* @kind other */
  --fs-eyebrow:  0.75rem;   /* @kind other */

  /* Line heights */
  --lh-tight:   1.0;  /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.035em; /* @kind other */
  --ls-snug:    -0.02em;  /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-eyebrow: 0.16em;   /* @kind other */

  /* Semantic aliases */
  --text-display-size: var(--fs-display); /* @kind other */
  --text-h1-size: var(--fs-h1);           /* @kind other */
  --text-h2-size: var(--fs-h2);           /* @kind other */
}

/* ============================================================
   SPACING — 4px base unit. Generous whitespace = premium.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --section-y: clamp(4rem, 9vw, 8rem); /* @kind spacing */
}

/* ============================================================
   RADIUS · SHADOW · MOTION — Lukas Klein
   Near-sharp editorial radii. Flat by default; the signature
   elevation is a hard offset "block" shadow, not a soft blur.
   ============================================================ */
:root {
  /* Corner radii — tight, editorial */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;  /* buttons, inputs */
  --radius-lg:   6px;  /* cards */
  --radius-xl:   10px; /* large panels */
  --radius-2xl:  14px;
  --radius-full: 999px;

  /* Soft shadows — quiet, warm-tinted, used sparingly */
  --shadow-xs:  0 1px 2px rgba(21,19,13,.05);
  --shadow-sm:  0 1px 2px rgba(21,19,13,.06);
  --shadow-md:  0 6px 16px rgba(21,19,13,.08);
  --shadow-lg:  0 16px 36px rgba(21,19,13,.11);
  --shadow-xl:  0 28px 64px rgba(21,19,13,.15);

  /* Signature: hard offset block shadow (no blur) */
  --shadow-block:      5px 5px 0 var(--ink-900);
  --shadow-block-sm:   3px 3px 0 var(--ink-900);
  --shadow-block-klein:5px 5px 0 var(--blue-600);

  /* Hairline "card" border companion */
  --hairline: 1px solid var(--border-hairline); /* @kind other */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}