/* ============================================================
   SPOON — Brand Tokens v3
   Cream / Ink / Crimson palette. DM Serif Display + EB Garamond + Jost.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* PALETTE — dark-first.
     Ink is the canvas. Cream is the type. Burgundy is the gesture. */
  --cream:     #FFFFFF;
  --bone:      #F4EEDB;
  --ink:       #0E0E10;
  --ink-soft:  #1A1A1D;
  --burgundy:        #8B2526;
  --burgundy-bright: #B5343F;
  --burgundy-deep:   #5C1A19;
  --claret:          #8B2526;
  --crimson:         #B61E2E;
  --crimson-bright:  #B5343F;
  --cobalt:    #1E3A8A;
  --amber:     #C58A3A;
  --stone:     #8B8478;
  --linen:     #DDD3BE;

  /* SEMANTIC — night mode by default */
  --bg:        var(--ink);
  --bg-alt:    var(--ink-soft);
  --fg:        var(--cream);
  --fg-muted:  rgba(255, 255, 255, 0.62);
  --accent:    var(--burgundy);
  --rule:      var(--cream);
  --rule-soft: rgba(255, 255, 255, 0.18);

  /* TYPE FAMILIES */
  --font-display: 'DM Serif Display', 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-body:    'EB Garamond', 'Tiempos Text', Georgia, serif;
  --font-sans:    'Jost', 'Söhne', system-ui, -apple-system, sans-serif;

  /* SCALE */
  --t-hero:     clamp(64px, 9vw, 144px);
  --t-display:  clamp(40px, 5vw, 72px);
  --t-h1:       clamp(32px, 3.6vw, 48px);
  --t-h2:       clamp(24px, 2.4vw, 32px);
  --t-prose:    19px;
  --t-body:     17px;
  --t-meta:     12px;
  --t-eyebrow:  11px;
  --t-track-eyebrow: 0.26em;
  --t-track-label:   0.18em;

  /* SPACING — 8pt base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* SHAPE */
  --rule-thin: 1px;
  --rule-1:    1px solid var(--rule);
  --rule-soft-1: 1px solid var(--rule-soft);

  /* MOTION */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  280ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga', 'kern';
}

::selection { background: var(--burgundy); color: var(--cream); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}
h1 { font-size: var(--t-h1); line-height: 1.05; }
h2 { font-size: var(--t-h2); line-height: 1.1; }
em { font-style: italic; }

p { margin: 0 0 1em 0; text-wrap: pretty; }

/* UTILITY */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-track-eyebrow);
  text-transform: uppercase;
  color: var(--crimson);
  font-weight: 600;
}
.label {
  font-family: var(--font-sans);
  font-size: var(--t-meta);
  letter-spacing: var(--t-track-label);
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
}

/* ============================================================
   Make every burgundy-coloured eyebrow / label / accent label POP.
   ============================================================ */
.hero-eyebrow,
.eyebrow,
.label,
.btn-eye,
.ab-eye,
.pe-eye,
.ap-eye,
.app-eye,
.spec-card b,
.essence-cell .e-no,
.legend-item .num,
.detail .lbl,
.size-cell .size-spec,
.misuse-cell .m-eye,
.rule-cell .verdict,
.swatch .s-role,
.email-rules b,
.inv-rules b,
.clearspace-notes li b,
.photo-rules .pr-cell b,
.palette-notes .pn b,
.er-row b,
.ir-list li b,
.ws-eye {
  font-weight: 600;
}

/* Catch inline-styled burgundy-tinted uppercase spans by attribute. */
[style*="--burgundy"][style*="uppercase"],
[style*="var(--burgundy)"][style*="uppercase"],
[style*="var(--crimson)"][style*="uppercase"],
[style*="var(--crimson-bright)"][style*="uppercase"],
[style*="#8B2526"][style*="uppercase"],
[style*="#B5343F"][style*="uppercase"] {
  font-weight: 600 !important;
}
.meta {
  font-family: var(--font-sans);
  font-size: var(--t-meta);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.prose {
  font-family: var(--font-body);
  font-size: var(--t-prose);
  line-height: 1.55;
}
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.96;
  letter-spacing: -0.018em;
}
.rule-line {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--cream);
  margin: var(--s-4) 0;
}
.rule-line--red { background: var(--crimson); }
.rule-line--long { width: 64px; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--burgundy); }