/* ============================================================
   Zurich Dinner — Design Tokens
   Editorial-refined × Modern Swiss
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Newsreader: editorial display serif with optical sizing      */
/* Geist + Geist Mono: modern Swiss-grotesque sans + mono        */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — base palette
     ============================================================ */

  /* Paper — the brand sits on warm cream, never pure white */
  --paper:        #F6F1E8;   /* primary background — warm cream */
  --paper-2:      #EFE7D8;   /* slightly deeper cream — sections */
  --paper-3:      #E5DAC4;   /* deepest cream — wells, dividers fill */
  --linen:        #FAF6EE;   /* lightest, almost-white surface */

  /* Ink — neutral grayscale, slightly warm */
  --ink:          #1A1815;   /* primary text — deep warm black */
  --ink-2:        #3A352D;   /* secondary text */
  --ink-3:        #6B6358;   /* tertiary text, captions */
  --ink-4:        #968C7E;   /* muted, placeholders */
  --ink-5:        #C8BFB0;   /* hairlines, disabled */

  /* Bordeaux — the brand accent. Wine, dinner, warmth. */
  --bordeaux:       #6E1F2E;  /* primary accent */
  --bordeaux-deep:  #4F1520;  /* hover / pressed */
  --bordeaux-soft:  #A04557;  /* lighter, for tints */
  --bordeaux-wash:  #F1E2DF;  /* tint surface */

  /* Lake — Zürichsee blue, supporting accent */
  --lake:         #2C4A6B;
  --lake-soft:    #6E8AA8;
  --lake-wash:    #E2EAF1;

  /* Brass — used VERY sparingly, for editorial flourish */
  --brass:        #B08D3F;
  --brass-wash:   #F0E6CF;

  /* Semantic */
  --positive:     #3F6B3A;
  --positive-wash:#E2ECDD;
  --warning:      #B57A1F;
  --warning-wash: #F4E7CF;
  --negative:     #8C2A1F;
  --negative-wash:#F1DCD8;

  /* ============================================================
     COLOR — semantic role tokens (use these in components)
     ============================================================ */

  --bg:            var(--paper);
  --bg-elevated:   var(--linen);
  --bg-sunken:     var(--paper-2);
  --bg-well:       var(--paper-3);

  --fg:            var(--ink);
  --fg-2:          var(--ink-2);
  --fg-3:          var(--ink-3);
  --fg-muted:      var(--ink-4);
  --fg-disabled:   var(--ink-5);
  --fg-on-accent:  var(--linen);

  --accent:        var(--bordeaux);
  --accent-hover:  var(--bordeaux-deep);
  --accent-soft:   var(--bordeaux-soft);
  --accent-wash:   var(--bordeaux-wash);

  --border:        #D9CFBC;       /* warm hairline */
  --border-strong: #B8AC95;
  --border-ink:    var(--ink);    /* editorial rule */

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display:  'Newsreader', 'GT Sectra', 'Tiempos Headline', Georgia, serif;
  --font-sans:     'Geist', 'Söhne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:     'Geist Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ============================================================
     TYPE — type scale (modular, 1.2 minor third)
     ============================================================ */
  --t-xxs:  11px;
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;
  --t-5xl:  84px;
  --t-6xl:  112px;

  /* line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* tracking */
  --tr-display: -0.02em;
  --tr-headline: -0.015em;
  --tr-body:    -0.005em;
  --tr-mono:     0;
  --tr-eyebrow:  0.14em;
  --tr-label:    0.06em;

  /* ============================================================
     SPACING — 4px base, ample editorial rhythm
     ============================================================ */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;
  --s-40:  160px;

  /* ============================================================
     RADII — restrained. Swiss systems prefer crisp corners.
     ============================================================ */
  --r-0:    0;
  --r-1:    2px;        /* hairline rounding on inputs */
  --r-2:    4px;        /* tags, small chips */
  --r-3:    8px;        /* cards */
  --r-4:    12px;       /* large cards */
  --r-pill: 999px;      /* pill buttons (used sparingly) */

  /* ============================================================
     SHADOWS — soft, warm, low-contrast. No harsh drop shadows.
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(26, 24, 21, 0.04), 0 1px 1px rgba(26, 24, 21, 0.03);
  --shadow-2: 0 4px 12px rgba(26, 24, 21, 0.06), 0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow-3: 0 12px 32px rgba(26, 24, 21, 0.08), 0 2px 6px rgba(26, 24, 21, 0.04);
  --shadow-4: 0 24px 60px rgba(26, 24, 21, 0.10), 0 4px 10px rgba(26, 24, 21, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(26, 24, 21, 0.06);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:    1200px;
  --container-sm: 720px;
  --gutter:       var(--s-8);
  --rule:         1px solid var(--border);
  --rule-ink:     1px solid var(--border-ink);
}

/* ============================================================
   BASE — element styles. Use these classes, or just write semantic HTML.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Display & headlines ---------- */
.display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(var(--t-4xl), 8vw, var(--t-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  color: var(--fg);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-headline);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-headline);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-headline);
  font-weight: 500;
  font-variation-settings: "opsz" 28;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  font-weight: 500;
  letter-spacing: var(--tr-body);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- Body ---------- */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 24;
  color: var(--fg-2);
  text-wrap: pretty;
}

.small, small {
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-label);
  color: var(--fg-3);
}

/* ---------- Eyebrows / labels — Swiss-grid signature ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- Mono — used for data, times, technical UI ---------- */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: var(--tr-mono);
  font-feature-settings: "tnum", "ss01";
}

.numerals {
  font-variant-numeric: tabular-nums;
}

/* ---------- Editorial accents ---------- */
.accent-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 48;
}

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-8) 0;
}

.rule-ink {
  border: 0;
  border-top: 1px solid var(--border-ink);
  margin: var(--s-6) 0;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--bordeaux);
  color: var(--linen);
}