/* =============================================================
   ZEGLER - Design Tokens
   The single source of truth for colour, type, space, motion.
   Change the brand here, not in the components.
   ============================================================= */

:root {
  /* ---- Brand palette -------------------------------------- */
  --ink:            #0A0B0D;   /* near-black - primary text, dark sections */
  --ink-soft:       #17191D;
  --ink-mute:       #5A5C61;
  --ink-faint:      #8A8B8F;

  --bone:           #FBF9F5;   /* page background - warm white */
  --paper:          #FFFFFF;
  --sand:           #F1EAE0;   /* soft beige surface */
  --beige:          #DFD1BB;   /* signature beige */
  --beige-deep:     #C0A986;   /* accent beige - lines, indicators */
  --beige-ink:      #8C734C;   /* beige that passes contrast on light */

  /* The deep accent. Oxblood: warm enough to belong with the beige,
     different enough in hue to still read as an accent against it.
     To swap the whole site to espresso brown instead, change these three
     values to #4A3122 / #241811 / #6E4B33 and rebuild. Nothing else. */
  --deep:           #5C2733;   /* accents, serif words, icons, hover wash */
  --deep-strong:    #2B1319;   /* the darkest surface, used by the CTA band */
  --deep-soft:      #8A4553;   /* gradients and secondary marks */

  /* ---- Semantic ------------------------------------------- */
  --bg:             var(--bone);
  --fg:             var(--ink);
  --accent:         var(--beige-deep);
  --accent-ink:     var(--beige-ink);

  --line:           color-mix(in srgb, var(--ink) 12%, transparent);
  --line-soft:      color-mix(in srgb, var(--ink) 7%, transparent);
  --line-strong:    color-mix(in srgb, var(--ink) 22%, transparent);

  --line-invert:       color-mix(in srgb, var(--bone) 16%, transparent);
  --line-invert-soft:  color-mix(in srgb, var(--bone) 9%, transparent);

  /* ---- Typography ----------------------------------------- */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Fluid type scale - 360px → 1600px viewport */
  --step--2: clamp(0.694rem, 0.68rem + 0.06vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.81rem + 0.11vw, 0.938rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.28vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.5vw, 1.9rem);
  --step-3:  clamp(1.728rem, 1.54rem + 0.86vw, 2.6rem);
  --step-4:  clamp(2.074rem, 1.76rem + 1.42vw, 3.5rem);
  --step-5:  clamp(2.488rem, 1.98rem + 2.3vw, 4.8rem);
  --step-6:  clamp(2.986rem, 2.12rem + 3.9vw, 6.6rem);

  --tracking-tight:  -0.035em;
  --tracking-snug:   -0.02em;
  --tracking-wide:   0.14em;
  --leading-tight:   1.02;
  --leading-snug:    1.14;
  --leading-body:    1.62;

  /* ---- Space ---------------------------------------------- */
  --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:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: clamp(3.75rem, 2.8rem + 3.2vw, 6.5rem);

  --gutter:      clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --measure:     68ch;
  --max-width:   1440px;
  --max-content: 1180px;

  /* ---- Shape & depth -------------------------------------- */
  --radius-s:  6px;
  --radius-m:  12px;
  --radius-l:  20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(10, 11, 13, 0.04), 0 2px 8px rgba(10, 11, 13, 0.03);
  --shadow-m: 0 2px 6px rgba(10, 11, 13, 0.05), 0 12px 32px rgba(10, 11, 13, 0.06);
  --shadow-l: 0 24px 64px -20px rgba(43, 19, 25, 0.24), 0 4px 12px rgba(10, 11, 13, 0.04);

  /* ---- Motion --------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur:       320ms;
  --dur-slow:  620ms;
  --dur-reveal: 900ms;

  /* ---- Layout helpers ------------------------------------- */
  --header-h: 72px;
}

/* Dark surfaces invert the semantic layer rather than re-declaring
   every component. Any block can opt in with .is-dark. */
.is-dark {
  --bg: var(--ink);
  --fg: var(--bone);
  --line: var(--line-invert);
  --line-soft: var(--line-invert-soft);
  --line-strong: color-mix(in srgb, var(--bone) 28%, transparent);
  --ink-mute: #9B9C9F;
  --ink-faint: #6E7074;
  --accent-ink: var(--beige);
  color: var(--fg);
  background-color: var(--bg);
  background-image: url("../img/grain.png");
  background-size: 64px 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}