/* =============================================================
   Dit Zit — Design Tokens
   Premium repositioning: gold + warm-dark + ivory.
   Source palette (legacy, kept for reference under --legacy-*):
     primary  #6298A8   secondary #F4C095   accent  #EF8354
     bg       #E6F0F2   bg-warm   #FDE3D2
     gradient #A1C3CE → #FDD2B4
   New direction: shift toward goud, donkergrijs/zwart, ivoor.
   ============================================================= */

/* --- Webfonts --- */
/* Display: Cormorant Garamond — high-contrast didone-ish serif, premium feel.
   Body:    Inter Tight — neutral, modern grotesque (placeholder; flagged).
   See README CONTENT FUNDAMENTALS / VISUAL FOUNDATIONS for usage notes. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand: Gold scale ---------- */
  --gold-50:  #FBF6EC;   /* champagne mist  — page tints */
  --gold-100: #F4E9CF;   /* ivory gold      — hover/well */
  --gold-200: #E9D4A2;   /* warm sand       — borders   */
  --gold-300: #D9B86E;   /* light gold      — disabled gold */
  --gold-400: #C99A3F;   /* signature gold  — PRIMARY  (matches logo) */
  --gold-500: #B8862C;   /* deep gold       — hover    */
  --gold-600: #9B6F1F;   /* bronze          — pressed  */
  --gold-700: #75531A;   /* antique bronze  — on light */
  --gold-900: #3E2C0E;   /* burnt umber     — text accent */

  /* ---------- Neutrals: Warm graphite ---------- */
  --ink-1000: #0E0D0B;   /* near-black, slight warm bias */
  --ink-900:  #181613;   /* surface dark   — hero, footer */
  --ink-800:  #232019;   /* card dark      — premium panels */
  --ink-700:  #322D24;   /* dark border / quiet text on dark */
  --ink-600:  #4A4338;
  --ink-500:  #6E6557;
  --ink-400:  #948A7A;   /* muted body */
  --ink-300:  #BDB4A4;
  --ink-200:  #DCD5C7;   /* hairline on light */
  --ink-100:  #ECE6D8;   /* subtle line */
  --ink-50:   #F6F1E5;   /* warm off-white */

  /* ---------- Surface (ivory family, replaces #E6F0F2) ---------- */
  --ivory:        #FBF7EE;   /* default page bg */
  --ivory-warm:   #F5EEDF;   /* alt section */
  --ivory-deep:   #ECE2CC;   /* contrast band */
  --ivory-paper:  #FFFCF5;   /* cards on ivory */

  /* ---------- Semantic surfaces ---------- */
  --bg:           var(--ivory);
  --bg-alt:       var(--ivory-warm);
  --bg-deep:      var(--ivory-deep);
  --bg-dark:      var(--ink-900);
  --bg-dark-alt:  var(--ink-800);
  --surface:      #FFFFFF;
  --surface-warm: var(--ivory-paper);
  --surface-dark: var(--ink-800);

  /* ---------- Text ---------- */
  --fg-1:         var(--ink-1000);   /* primary copy on light */
  --fg-2:         var(--ink-700);    /* secondary copy */
  --fg-3:         var(--ink-500);    /* tertiary / captions */
  --fg-4:         var(--ink-400);    /* muted / placeholder */
  --fg-on-dark-1: #F6F1E5;           /* primary copy on dark */
  --fg-on-dark-2: #C9C0AC;           /* secondary on dark */
  --fg-on-dark-3: #8A8270;           /* muted on dark */
  --fg-gold:      var(--gold-400);
  --fg-gold-deep: var(--gold-700);   /* gold legible on light bg */

  /* ---------- Borders / dividers ---------- */
  --border-hairline:  rgba(14, 13, 11, 0.08);
  --border-subtle:    rgba(14, 13, 11, 0.14);
  --border-strong:    rgba(14, 13, 11, 0.32);
  --border-on-dark:   rgba(246, 241, 229, 0.10);
  --border-gold:      var(--gold-400);
  --border-gold-soft: rgba(201, 154, 63, 0.32);

  /* ---------- Accents (kept warm; legacy oranges retired to --legacy-*) ---------- */
  --accent-rust:   #B45A2A;          /* warm rust, replaces #EF8354 */
  --accent-rose:   #E6C7A8;          /* dusty rose, soft warmth */

  /* ---------- Status ---------- */
  --success:  #4F7A47;
  --warning:  #C9852E;
  --danger:   #9B3B2E;
  --info:     #4A6B7A;   /* desaturated take on legacy primary */

  /* ---------- Gradients ---------- */
  --grad-gold:        linear-gradient(135deg, #E9D4A2 0%, #C99A3F 55%, #75531A 100%); /* @kind color */
  --grad-gold-soft:   linear-gradient(180deg, #FBF6EC 0%, #F4E9CF 100%); /* @kind color */
  --grad-ink:         linear-gradient(180deg, #232019 0%, #0E0D0B 100%); /* @kind color */
  --grad-protect-top: linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0) 100%); /* @kind color */
  --grad-protect-bot: linear-gradient(0deg,   rgba(14,13,11,0.65) 0%, rgba(14,13,11,0) 100%); /* @kind color */

  /* ---------- Legacy (do not use for new work — kept for migrations) ---------- */
  --legacy-primary:   #6298A8;
  --legacy-secondary: #F4C095;
  --legacy-accent:    #EF8354;
  --legacy-bg-cool:   #E6F0F2;
  --legacy-bg-warm:   #FDE3D2;

  /* ---------- Typography: families ---------- */
  --font-display: "Cormorant Garamond", "Apple Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- Type scale (1.250 — major third, premium-editorial) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;        /* base */
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- Tracking ---------- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* small caps / eyebrows  */
  --tracking-widest:  0.24em;   /* logo-style spacing     */

  /* ---------- Leading ---------- */
  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-relaxed:1.6;
  --leading-loose:  1.75;

  /* ---------- Spacing (4px base) ---------- */
  --s-0: 0; /* @kind spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;

  /* ---------- Radii (restrained: premium ≠ very round) ---------- */
  --r-0: 0; /* @kind radius */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-pill: 999px;

  /* ---------- Shadows: warm, low spread, layered ---------- */
  --shadow-1: 0 1px 0 rgba(14,13,11,0.04), 0 1px 2px rgba(14,13,11,0.06);
  --shadow-2: 0 2px 4px rgba(14,13,11,0.06), 0 8px 24px rgba(14,13,11,0.08);
  --shadow-3: 0 8px 16px rgba(14,13,11,0.10), 0 24px 60px rgba(14,13,11,0.14);
  --shadow-4: 0 24px 80px rgba(14,13,11,0.22);
  --shadow-inner-warm: inset 0 1px 0 rgba(255,253,245,0.8), inset 0 -1px 0 rgba(14,13,11,0.06);
  --shadow-gold-glow: 0 0 0 1px rgba(201,154,63,0.30), 0 8px 28px rgba(201,154,63,0.20);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.1, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 200ms; /* @kind other */
  --dur-3: 320ms; /* @kind other */
  --dur-4: 520ms; /* @kind other */
}

/* =============================================================
   Element defaults — semantic styles bound to tokens
   ============================================================= */

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

/* Display headings — serif, tight, elegant */
.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-72);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-48);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-36);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--leading-snug);
}

/* Eyebrows — tracked, uppercase, gold accent */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-gold-deep);
  font-weight: 500;
}

/* Body */
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}
small, .caption {
  font-size: var(--fs-13);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--border-gold-soft);
  transition: color var(--dur-2) var(--ease-standard),
              text-decoration-color var(--dur-2) var(--ease-standard);
}
a:hover {
  color: var(--gold-500);
  text-decoration-color: var(--gold-500);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--gold-200);
  color: var(--ink-1000);
}