/*
  SEED: 476676

  A — Layout:      digit 6 → Dashboard grid (information-dense, tight spacing, tabular rhythm)
  B — Color:       digit 7 → Charcoal (#1c1c1e) base, copper/bronze primary, cool grey secondary
  C — Typography:  digit 6 → Display: Clash Display + Body: Libre Baskerville (serif)
  D — Visual lang: digit 6 → Dot grid pattern (radial-gradient) as surface texture
  E — Navigation:  digit 7 → Inline contextual — links embedded in the hero layout, no nav bar
  F — Tone:        digit 4 → Poetic editorial (longer rhythm, unexpected metaphors, considered word choice)

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.
*/

/*
  BRAND ARCHETYPE:    Luminary — refined, dark, elevated
  LAYOUT PARADIGM:    Dashboard grid (12-col console) + F-column scan; left index rail,
                      ruled tabular rows, everything reads like an instrument panel
  SECTION ORDER:      Hero → Index (the five, tabulated) → Manifesto → The Five Ways (dossier rows)
                      → Newsletter (full-bleed copper) → Footer (giant wordmark)
  DISPLAY FONT:       Clash Display — https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700
  BODY FONT:          Libre Baskerville — https://fonts.googleapis.com/css2?family=Libre+Baskerville
  PRIMARY COLOR:      #c07a45 copper — an alloyed, worked metal: warmth held under restraint,
                      the opposite of clinical white; luxury that has been handled, not sold
  SHAPE LANGUAGE:     Sharp / rectangular — zero border-radius, ruled hairlines, hard corners
  SIGNATURE MOMENT:   A charcoal console: giant copper index numerals bleed across ruled
                      dossier rows, dot-grid texture drifting in parallax; magnetic primary CTA
  TONE OF VOICE:      Poetic, restrained, unhurried (German)
*/

:root {
  /* ---- Color: charcoal base, copper primary, cool grey secondary (max 3 hues) ---- */
  --brand-primary:   #c07a45;   /* worked copper — the one bold commitment */
  --brand-primary-2: #d99a63;   /* lifted copper for gradients/glints */
  --brand-primary-3: #8a4f28;   /* deep bronze shadow */
  --brand-secondary: #8b93a3;   /* cool slate grey — the unexpected complement */
  --brand-accent:    #e6a860;   /* luminous gold — CTAs, active states, highlights */

  --surface-base:    #1c1c1e;   /* charcoal — the page */
  --surface-raised:  #242427;   /* lifted panels, dossier plates */
  --surface-sunken:  #161618;   /* wells, insets */
  --surface-inverse: var(--brand-primary); /* copper full-bleed sections */

  --text-primary:    #f3efe8;   /* warm bone white on charcoal */
  --text-secondary:  #9aa0ab;   /* cool grey — meta, labels, captions */
  --text-muted:      #6f7580;   /* deep grey — fine print */
  --text-inverse:    #191512;   /* near-black on copper */
  --text-on-copper:  #241608;   /* readable ink on brand-primary fills */

  --border-subtle:   rgba(243, 239, 232, 0.09);
  --border-strong:   rgba(243, 239, 232, 0.22);
  --border-copper:   rgba(192, 122, 69, 0.55);

  /* ---- Typography ---- */
  --font-display: 'Clash Display', 'Times New Roman', serif;
  --font-body:    'Libre Baskerville', Georgia, 'Times New Roman', serif;

  /* fluid scale — no fixed breakpoints for type */
  --text-hero: clamp(3.25rem, 9.5vw, 8.5rem);
  --text-h1:   clamp(2.5rem, 6vw, 5rem);
  --text-h2:   clamp(1.6rem, 3.4vw, 2.6rem);
  --text-h3:   clamp(1.2rem, 2.2vw, 1.6rem);
  --text-body: clamp(1rem, 1.15vw, 1.075rem);
  --text-sm:   clamp(0.75rem, 0.9vw, 0.8125rem);
  --text-xs:   0.6875rem;

  --numeral: clamp(4rem, 16vw, 13rem); /* the giant index numerals */

  /* ---- Spacing (tight, dashboard rhythm) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 38px;
  --space-7: 56px;
  --space-8: 80px;
  --space-9: 116px;

  /* ---- Structure ---- */
  --shell-max: 1320px;
  --gutter: clamp(16px, 3.2vw, 42px);
  --rule: 1px;

  /* sharp shape language */
  --radius: 0px;

  /* elevation as glow, not drop-shadow */
  --shadow-sm: 0 1px 0 var(--border-subtle);
  --shadow:    0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --glow-copper: 0 12px 40px -14px rgba(192, 122, 69, 0.55);

  /* dot-grid surface texture (Visual language D) */
  --dot:      rgba(243, 239, 232, 0.055);
  --dot-copper: rgba(192, 122, 69, 0.10);
  --dot-size: 26px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}