/* ============================================================
   Studio Stylez — Colors & Type tokens
   Source of truth for the design system.
   ============================================================ */

/* Fonts worden geladen via <link> in index.html — geen dubbele @import nodig */

:root {
  /* ---------- Brand palette (from Huisstijl handboek) ---------- */
  /* Hoofdkleuren — main brand colors */
  --ss-choco:        #746445; /* primary brown — logo "Choco" */
  --ss-mushroom:     #e2ddd2; /* warm cream background */
  --ss-sand:         #cbc0aa; /* mid beige */
  --ss-terra:        #9d705b; /* rust accent */
  --ss-walnut:       #64574e; /* deep warm brown */

  /* Accentkleuren — accent palette */
  --ss-sage-50:      #d2d5ce;
  --ss-sage:         #adb7af;
  --ss-eucalyptus:   #809495;
  --ss-deep-sea:     #45595a;

  --ss-shell:        #d4c6bd;
  --ss-blush:        #c4a299;
  --ss-mauve:        #a67f78;
  --ss-clay:         #7f5c58;

  /* Logo color variants documented in handbook */
  --ss-logo-choco:   #746445;
  --ss-logo-brons:   #7a7548; /* olive bronze */
  --ss-logo-terra:   #9d705b;
  --ss-logo-mushroom:#cbc0aa;

  /* ---------- Neutral utility scale (warm, not cool grey) ---------- */
  --ss-paper:        #f6f4ef; /* off-white page */
  --ss-bone:         #efe9df;
  --ss-stone-100:    #ddd6c8;
  --ss-stone-300:    #b6ad9d;
  --ss-stone-500:    #847964;
  --ss-stone-700:    #4c4438;
  --ss-ink:          #29261f; /* near-black, never pure */
  --ss-white:        #ffffff;
  --ss-black:        #000000;

  /* ---------- Semantic surfaces & text ---------- */
  --bg:              var(--ss-paper);
  --bg-alt:          var(--ss-mushroom);
  --bg-deep:         var(--ss-walnut);
  --bg-section:      var(--ss-bone);

  --fg:              var(--ss-ink);
  --fg-muted:        var(--ss-stone-500);
  --fg-soft:         var(--ss-stone-300);
  --fg-on-dark:      var(--ss-mushroom);

  --border:          rgba(41, 38, 31, 0.10);
  --border-strong:   rgba(41, 38, 31, 0.22);
  --rule:            rgba(41, 38, 31, 0.18); /* hairline rules — see handbook headers */

  --accent:          var(--ss-choco);
  --accent-warm:     var(--ss-terra);
  --accent-cool:     var(--ss-eucalyptus);

  /* ---------- Typography stacks ----------
     Brand specifies (paid) Omnium Light, Kiro Regular, TT Rounds Neue Condensed.
     Until licenced files are dropped into /fonts, the system substitutes from
     Google Fonts. See README "Type substitutions". */
  --font-display:    "Antonio", "Omnium", "Tenor Sans", serif; /* logo / hero display */
  --font-condensed:  "Barlow Condensed", "TT Rounds Neue Condensed", "Antonio", sans-serif; /* print/Canva */
  --font-body:       "Inter", "Kiro", "Calibri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:       ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* ---------- Type scale (rem on a 16 px base) ----------
     Lift letter-spacing & weight stay light — never bold.
     Display caps are airy and tracked, mirroring the wordmark. */
  --fs-display:      clamp(48px, 7vw, 96px);  /* hero, page-opener */
  --fs-h1:           clamp(36px, 4.4vw, 56px);
  --fs-h2:           clamp(28px, 3vw, 40px);
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      11px; /* small caps / dotted rule labels */

  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.55;
  --lh-loose:        1.75;

  --tr-tight:        -0.01em;
  --tr-normal:       0;
  --tr-wide:         0.06em;   /* eyebrows */
  --tr-airy:         0.18em;   /* uppercase display, à la wordmark */

  /* ---------- Spacing (8 px rhythm with a 4 px half-step) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-organic: 64% 36% 58% 42% / 52% 60% 40% 48%; /* organic blob, echoes the logo mark */

  /* ---------- Shadows — soft, plaster-light. Never harsh. ---------- */
  --shadow-xs: 0 1px 2px rgba(41, 38, 31, 0.04);
  --shadow-sm: 0 2px 6px rgba(41, 38, 31, 0.05), 0 1px 2px rgba(41, 38, 31, 0.04);
  --shadow-md: 0 8px 24px rgba(41, 38, 31, 0.07), 0 2px 6px rgba(41, 38, 31, 0.04);
  --shadow-lg: 0 24px 48px rgba(41, 38, 31, 0.10), 0 6px 16px rgba(41, 38, 31, 0.05);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion — slow, no bounce ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  520ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* ============================================================
   Element defaults — a calm, warm baseline.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headings echo the wordmark — uppercase, light weight, tracked. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight);  letter-spacing: var(--tr-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);   letter-spacing: var(--tr-normal); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug);   letter-spacing: var(--tr-normal); font-weight: 400; }
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin: 0;
}

/* Eyebrow / label — small caps with airy tracking, mirrors handbook headers. */
.eyebrow,
.label-uppercase {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-airy);
  color: var(--fg-muted);
  font-weight: 500;
}

/* Hero / display — uses the airy display face uppercase. */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 200;
  letter-spacing: var(--tr-tight);
  line-height: 0.98;
  text-transform: uppercase;
}

p { margin: 0 0 1em 0; max-width: 64ch; text-wrap: pretty; }
p.lead { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg); max-width: 56ch; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--accent); color: var(--accent); }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-7) 0;
}

/* Page header rule — matches handbook section openers (band + thin line). */
.handbook-header {
  background: var(--ss-sand);
  color: var(--fg);
  padding: var(--sp-5) var(--sp-7);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.handbook-header h2 { font-family: var(--font-display); font-weight: 300; color: var(--fg); }
.handbook-header .rule-line { flex: 1; height: 1px; background: var(--ss-paper); opacity: .9; }