/* =========================================================================
   La Souveraine — Design Tokens
   colors_and_type.css
   
   Single source of truth for color, typography, spacing, motion.
   Import once at the root: <link rel="stylesheet" href="/colors_and_type.css">
   ========================================================================= */

/* ---------- Webfonts ----------------------------------------------------- */
/* Primary stack: hosted via Google Fonts as the closest free analogues to
   the paid editorial faces this brand would use in production (Canela,
   Tiempos Headline, Söhne). Substitution flagged in fonts/README.md. */

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

/* =========================================================================
   :root — design tokens
   ========================================================================= */
:root {

  /* ---------- Color: raw palette ---------------------------------------
     High-end editorial: black + white + a single editorial red.
     Reference: Condé Nast, Martini, Vogue masthead. Clean, no warmth,
     no grain. The red is the only color in the system.                 */
  --noir:         #0A0A0A;   /* near-black ink — primary text */
  --noir-soft:    #1A1A1A;   /* one step lifted, for raised surfaces in dark mode */
  --blanc:        #FFFFFF;   /* primary surface — pure white, editorial */
  --blanc-bone:   #FAFAF7;   /* secondary surface; barely warmer than blanc */
  --pearl:        #F2F2EE;   /* sunken surface, footer tint */
  --smoke:        #BFBFBF;   /* hairline borders, dividers */
  --graphite:     #6E6E6E;   /* muted text, captions */
  --rouge:        #C8102E;   /* the only accent — Vogue/Condé editorial red */
  --rouge-deep:   #A30D24;   /* hover/press for rouge */

  /* Legacy aliases — old token names kept so existing components keep
     rendering. These all point at the new palette. Replace at leisure. */
  --encre:        var(--noir);
  --encre-soft:   var(--noir-soft);
  --ivoire:       var(--blanc);
  --ivoire-pure:  var(--blanc-bone);
  --calcaire:     var(--pearl);
  --pierre:       var(--smoke);
  --cendre:       var(--graphite);
  --bordeaux:     var(--rouge);
  --bordeaux-deep:var(--rouge-deep);
  --rouille:      var(--rouge);
  --champagne:    var(--pearl);

  /* ---------- Color: semantic ------------------------------------------ */
  --bg:            var(--blanc);
  --bg-raised:     var(--blanc-bone);
  --bg-sunken:     var(--pearl);
  --bg-inverse:    var(--noir);

  --fg:            var(--noir);
  --fg-muted:      var(--graphite);
  --fg-subtle:     var(--smoke);
  --fg-inverse:    var(--blanc);

  --rule:          var(--smoke);
  --rule-strong:   var(--noir);

  --accent:        var(--rouge);
  --accent-hover:  var(--rouge-deep);
  --accent-fg:     var(--blanc);

  /* No success/warning/danger semantic colors by design — bordeaux on
     ivoire is used for confirmation; bordeaux underlined for error.    */

  /* ---------- Type: families ------------------------------------------- */
  --font-display:    'Italiana', 'Didot', 'Bodoni MT', 'Bodoni 72', serif;
  --font-editorial:  'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-utility:    'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif;

  /* ---------- Type: scale (modular, ratio ≈ 1.333) --------------------- */
  --fs-xs:    12px;   /* kicker labels, captions */
  --fs-sm:    14px;   /* small UI, footnote */
  --fs-base:  17px;   /* body text — slightly larger than typical, editorial */
  --fs-md:    20px;   /* lead paragraph */
  --fs-lg:    24px;   /* h4 */
  --fs-xl:    32px;   /* h3 */
  --fs-2xl:   44px;   /* h2 */
  --fs-3xl:   64px;   /* h1 */
  --fs-4xl:   96px;   /* hero display */
  --fs-5xl:   144px;  /* poster / brand mark moments */

  /* ---------- Type: weight & line height ------------------------------- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  --lh-tight:   1.04;   /* @kind font */
  --lh-snug:    1.18;   /* @kind font */
  --lh-normal:  1.35;   /* @kind font */
  --lh-relaxed: 1.55;   /* @kind font */
  --lh-loose:   1.7;    /* @kind font */

  --tracking-tight:    -0.02em; /* @kind font */
  --tracking-normal:    0;       /* @kind font */
  --tracking-wide:      0.04em;  /* @kind font */
  --tracking-kicker:    0.18em;  /* @kind font */

  /* ---------- Spacing -------------------------------------------------- */
  --s-0:   0;     /* @kind spacing */
  --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;

  /* ---------- Layout --------------------------------------------------- */
  --container-narrow: 720px;   /* @kind spacing */
  --container:        1080px;  /* @kind spacing */
  --container-wide:   1280px;  /* @kind spacing */
  --container-bleed:  1440px;  /* @kind spacing */

  /* ---------- Borders & radii ------------------------------------------ */
  --border-hairline: 1px solid var(--rule);        /* @kind other */
  --border-strong:   1px solid var(--rule-strong); /* @kind other */
  --radius:    0;        /* always zero, except seal */
  --radius-seal: 9999px;

  /* ---------- Shadows -------------------------------------------------- */
  --shadow-rule:    0 1px 0 var(--rule);              /* sticky header bottom */
  --shadow-overlay: 0 24px 64px -32px rgba(28, 24, 20, 0.24);

  /* ---------- Motion --------------------------------------------------- */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur:        240ms; /* @kind other */
  --dur-slow:   480ms; /* @kind other */
  --dur-slower: 800ms; /* @kind other */

  /* ---------- Z-index -------------------------------------------------- */
  --z-base:   1;   /* @kind other */
  --z-sticky: 50;  /* @kind other */
  --z-overlay: 80; /* @kind other */
  --z-modal:  100; /* @kind other */
  --z-toast:  120; /* @kind other */
}

/* =========================================================================
   Base — element-level semantic styles
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-editorial);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display — hero brand-mark moments */
.display,
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(64px, 10vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-editorial);
  font-weight: var(--fw-light);
  font-size: clamp(40px, 6vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-5);
}

h2, .h2 {
  font-family: var(--font-editorial);
  font-weight: var(--fw-light);
  font-size: clamp(32px, 4.4vw, var(--fs-2xl));
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-editorial);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-4);
}

h4, .h4 {
  font-family: var(--font-editorial);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-3);
}

/* Kicker — small uppercased Jost label sitting above headings */
.kicker {
  display: inline-block;
  font-family: var(--font-utility);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--s-4);
}

.kicker--accent { color: var(--accent); }

/* Body */
p, .p {
  margin: 0 0 var(--s-4);
  font-family: var(--font-editorial);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.long-form {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  hyphens: auto;
  text-align: justify;
}

.long-form > p:first-child::first-letter {
  font-family: var(--font-editorial);
  font-weight: var(--fw-medium);
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 12px 0 0;
}

/* Caption / utility */
.caption,
small {
  font-family: var(--font-utility);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* Quote */
blockquote, .pullquote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: var(--s-7) 0;
  padding: 0;
  border: 0;
  max-width: 32ch;
}

.pullquote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-utility);
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease);
}
a:hover { background-size: 100% 1px; }

a.link-bordeaux:hover { color: var(--accent); }

/* Horizontal rule — hairline */
hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--s-7) 0;
}

/* Editorial double rule */
.rule-double {
  border: 0;
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--pierre);
  height: 4px;
  margin: var(--s-6) 0;
}

/* Selection */
::selection {
  background: var(--encre);
  color: var(--ivoire);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   Utility classes (scoped, optional)
   ========================================================================= */

.font-display   { font-family: var(--font-display); }
.font-editorial { font-family: var(--font-editorial); }
.font-utility   { font-family: var(--font-utility); }

.italic         { font-style: italic; }
.uppercase      { text-transform: uppercase; letter-spacing: var(--tracking-kicker); }

.fg             { color: var(--fg); }
.fg-muted       { color: var(--fg-muted); }
.fg-subtle      { color: var(--fg-subtle); }
.fg-accent      { color: var(--accent); }
.fg-inverse     { color: var(--fg-inverse); }

.bg             { background: var(--bg); }
.bg-raised      { background: var(--bg-raised); }
.bg-sunken      { background: var(--bg-sunken); }
.bg-inverse     { background: var(--bg-inverse); color: var(--fg-inverse); }

.container        { max-width: var(--container);        margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-6); }
.container-wide   { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--s-6); }