/* ===========================================================================
   LUMEN-ATELIER · colors_and_type.css
   Single source of truth for design tokens. Reflects LMN–DS–2026 v1.0.
   "Paper, then ink. One typeface family per role. Numerals in mono."
   =========================================================================== */

/* ---- Webfonts (Google Fonts) -----------------------------------------------
   The Lumen brochure pulls fonts from Google Fonts directly. If shipping
   offline, drop matching .ttf/.woff2 files into fonts/ and switch to local
   @font-face. The four families and their roles are non-negotiable:
   - Inter Tight    → display (claims, KPI values, module names)
   - Inter          → body + UI labels
   - JetBrains Mono → identifiers, eyebrows, captions, numbers
   - Instrument Serif (italic only) → lede sentences
---------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* === COLOR · Surfaces ================================================= */
  --paper:        #faf9f6;   /* primary page background — warm off-white   */
  --paper-2:      #f3f2ee;   /* secondary surface, slightly cooler         */
  --ink:          #0a0a0a;   /* primary text + dark page background        */
  --ink-2:        #1a1a1a;   /* body text on paper, slightly lighter       */

  /* === COLOR · Type-color / lines ======================================= */
  --muted:        #6b6b68;   /* mono labels, captions, secondary text      */
  --muted-2:      #9a9a96;   /* tertiary on paper · primary mute on ink    */
  --line:         #d9d8d1;   /* hairline rules, card borders               */
  --line-soft:    #e8e7e1;   /* very soft divider                          */
  --dot:          #cfcec7;   /* 6mm dot grid background                    */

  /* === COLOR · Accents (oklch — matched chroma) ========================= */
  --coral:        oklch(0.68 0.16 32);     /* primary accent — single use   */
  --coral-soft:   oklch(0.92 0.04 32);     /* coral-tint surface            */
  --lime:         oklch(0.84 0.20 124);    /* planning surface              */
  --lime-ink:     oklch(0.55 0.16 124);    /* planning text, "do" mark      */

  /* === COLOR · Status =================================================== */
  --green:        oklch(0.58 0.12 150);
  --amber:        oklch(0.72 0.13 75);
  --red:          oklch(0.58 0.18 25);
  --accent:       oklch(0.55 0.14 245);    /* link blue · references only   */

  /* === COLOR · Semantic aliases (for design-system consumers) =========== */
  --bg:           var(--paper);
  --bg-soft:      var(--paper-2);
  --bg-inverse:   var(--ink);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-muted:     var(--muted);
  --fg-muted-2:   var(--muted-2);
  --fg-inverse:   var(--paper);
  --border:       var(--line);
  --border-soft:  var(--line-soft);
  --border-strong: var(--ink);

  /* === TYPE · Families ================================================== */
  --display:      "Inter Tight", "Inter", system-ui, sans-serif;
  --sans:         "Inter", system-ui, sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, monospace;
  --serif:        "Instrument Serif", Georgia, serif;

  /* === TYPE · Scale (kept in pt to match print-first brochure) ========= */
  --t-display:    84pt;   /* h-display — cover wordmark scale              */
  --t-xl:         34pt;   /* h-xl — section openers                        */
  --t-lg:         22pt;   /* h-lg                                          */
  --t-md:         14pt;   /* h-md                                          */
  --t-sm:         10.5pt; /* h-sm                                          */
  --t-lede:       18pt;   /* serif italic editorial sentence               */
  --t-body:       10pt;
  --t-body-sm:    9pt;
  --t-caption:    7.5pt;  /* mono uppercase 0.04em                         */
  --t-eyebrow:    8pt;    /* mono uppercase 0.14em                         */
  --t-mini:       7pt;    /* pills, shot-labels                            */

  /* === SPACING · millimetres (print-rooted, web honours 1mm = 3.78px) === */
  --sp-0:  1mm;
  --sp-1:  2mm;
  --sp-2:  3mm;
  --sp-3:  4mm;
  --sp-4:  5mm;
  --sp-5:  6mm;
  --sp-6:  7mm;
  --sp-7:  8mm;
  --sp-8:  10mm;
  --sp-9:  14mm;
  --sp-10: 18mm;

  /* === RADII · Lumen is square. ========================================= */
  --radius-0: 0;      /* default — square corners                          */
  --radius-1: 0.5mm;  /* hairline radius, only on inline pills if needed   */
  /* Anything ≥ 4mm rounding is wrong for Lumen.                           */

  /* === BORDERS ========================================================= */
  --hairline:     0.5px solid var(--line);
  --rule:         1px solid var(--line);
  --rule-strong:  1px solid var(--ink);

  /* === SHADOWS — sparingly. The page wears the one on the backdrop. ==== */
  --shadow-page:  0 30px 60px -20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.25);
  /* Cards, buttons, fields → NO shadows. Use --hairline. */

  /* === BACKGROUNDS ===================================================== */
  --bg-dot-paper: radial-gradient(circle, var(--dot) 0.7px, transparent 0.9px);
  --bg-dot-ink:   radial-gradient(circle, rgba(255,255,255,0.18) 0.7px, transparent 0.9px);
  --bg-dot-size:  6mm 6mm;
}

/* ===========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these (h-display, h-xl, body, lede, caption, eyebrow, mono, muted)
   directly in markup. They mirror the brochure exactly.
   =========================================================================== */

.h-display {
  font-family: var(--display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.h-xl {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.h-lg {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.h-md {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h-sm {
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-2);
}

.body-sm {
  font-family: var(--sans);
  font-size: var(--t-body-sm);
  line-height: 1.55;
  color: var(--ink-2);
}

.lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.caption {
  font-family: var(--mono);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono   { font-family: var(--mono); }
.serif  { font-family: var(--serif); }
.display { font-family: var(--display); }
.muted  { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

/* ===========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop this stylesheet into a page and headings + body inherit the system.
   =========================================================================== */

html {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

body {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-2);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h1 { font-size: var(--t-xl); line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; }
h2 { font-size: var(--t-lg); line-height: 1.1;  letter-spacing: -0.02em;  font-weight: 700; }
h3 { font-size: var(--t-md); line-height: 1.2;  font-weight: 600; }
h4 { font-size: var(--t-sm); line-height: 1.3;  font-weight: 600; }

p { margin: 0 0 var(--sp-4); font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.7; }

code, kbd, samp, pre {
  font-family: var(--mono);
  font-size: 0.92em;
}

hr { height: 1px; border: 0; background: var(--line); margin: var(--sp-5) 0; }
hr.strong { background: var(--ink); }

/* ===========================================================================
   UTILITY · RULES (1px ink and 0.5px hairline)
   The Lumen system uses borders, NOT shadows, to separate content.
   =========================================================================== */
.rule        { height: 1px; background: var(--line); border: 0; width: 100%; display: block; }
.rule-strong { height: 1px; background: var(--ink);  border: 0; width: 100%; display: block; }
.rule-dashed { height: 1px; border: 0; border-top: 0.5px dashed var(--line); width: 100%; display: block; }