/* ============================================================
   LUMERA — Colors & Type
   The system reads like an editorial: a bone/ivory canvas,
   ink-black type, and a single champagne accent reserved
   for moments of emphasis.
   ============================================================ */

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

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  /* Backgrounds */
  --bone:        #F2EBDD; /* primary surface — "the sunlit room" */
  --linen:       #ECE4D2; /* slightly deeper bone for layered surfaces */
  --cream:       #FBF7EE; /* card / lifted surface */
  --paper:       #FAF8F3; /* near-white, used on dark backgrounds */
  --shell:       #E5DBC5; /* warm divider tint */

  /* Ink scale (warm-shifted greys) */
  --ink:         #1A1612; /* primary text — bistre black, not pure */
  --ink-2:       #3D362C; /* body text */
  --ink-3:       #6B6258; /* secondary / meta */
  --ink-4:       #9A9082; /* tertiary / captions */
  --ink-5:       #BFB5A3; /* disabled / faintest */

  /* Lines & dividers */
  --line:        #D9D0BD;
  --line-soft:   #E5DCC8;
  --line-strong: #B7AC97;

  /* Champagne — the single accent */
  --champagne:    #B89968;
  --champagne-d:  #8C6E3F; /* hover / pressed */
  --champagne-l:  #D9C49A; /* tints */
  --champagne-xl: #ECDCBE; /* surface tint */

  /* Functional (used sparingly — Lumera never alarms) */
  --moss:        #6C7B5C; /* organic / certifications */
  --rose:        #B8786A; /* very rare — used in editorial only */
  --warn:        #8C6E3F; /* uses champagne-dark for errors */

  /* Reverse / "atelier" mode */
  --noir:        #1A1612;
  --noir-2:      #2A241D;
  --noir-line:   #3A332A;

  /* ── Type families ─────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --font-sans:    'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale (editorial, generous) ──────────────────── */
  --t-overline:   11px;   /* spaced-caps eyebrow */
  --t-meta:       13px;   /* prices, labels */
  --t-body:       16px;   /* default reading */
  --t-body-lg:    18px;   /* long-form journal body */
  --t-lede:       22px;   /* opening paragraph */
  --t-h6:         18px;
  --t-h5:         22px;
  --t-h4:         28px;
  --t-h3:         40px;
  --t-h2:         56px;
  --t-h1:         80px;
  --t-display:    120px;  /* hero only */

  /* ── Tracking ──────────────────────────────────────────── */
  --tr-tight:    -0.02em;
  --tr-display:  -0.015em;
  --tr-body:      0em;
  --tr-overline:  0.22em;  /* signature spaced-caps */
  --tr-button:    0.18em;
  --tr-label:     0.12em;

  /* ── Spacing (8pt with editorial extensions) ───────────── */
  --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; /* section air */

  /* ── Radii — Lumera is almost square. A 2px softening
     is all most surfaces ever receive. ──────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ── Borders ───────────────────────────────────────────── */
  --bw-hair:  0.5px;
  --bw-thin:  1px;

  /* ── Shadows — almost never used. Light, warm, low. ────── */
  --shadow-rest:  0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-lift:  0 8px 24px -12px rgba(26, 22, 18, 0.10);
  --shadow-modal: 0 24px 60px -24px rgba(26, 22, 18, 0.22);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-quiet:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* slow settle */
  --ease-glide:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     600ms;
  --dur-cinema:   1200ms; /* reveal-on-scroll */

  /* ── Layout ────────────────────────────────────────────── */
  --max-w:   1440px;
  --max-w-r: 720px;  /* reading width — journal */
}

/* ============================================================
   Element defaults — drop colors_and_type.css into any page
   and the editorial voice carries through.
   ============================================================ */
html, body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  margin: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; }
h4 { font-size: var(--t-h4); line-height: 1.2; }
h5, h6 {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
h5 { font-size: var(--t-h5); letter-spacing: var(--tr-display); text-transform: none; font-family: var(--font-display); color: var(--ink); }
h6 { font-size: var(--t-overline); }

p   { margin: 0 0 1em; max-width: 62ch; color: var(--ink-2); }
a   { color: var(--ink); text-decoration: none; border-bottom: var(--bw-hair) solid var(--ink); padding-bottom: 1px; transition: color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet); }
a:hover { color: var(--champagne-d); border-color: var(--champagne-d); }

hr  { border: 0; border-top: var(--bw-hair) solid var(--line); margin: var(--s-7) 0; }

/* ============================================================
   Semantic helpers — class names match the design vocabulary.
   ============================================================ */
.l-overline {
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-overline);
  color: var(--ink-3);
  font-weight: 400;
}

.l-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: var(--tr-display);
  line-height: 0.95;
}

.l-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 32ch;
}

.l-meta {
  font-size: var(--t-meta);
  color: var(--ink-3);
  letter-spacing: var(--tr-label);
}

.l-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink);
}

.l-price {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  color: var(--ink-2);
}

/* The signature divider: a single hairline with a champagne tick */
.l-rule {
  display: block;
  border: 0;
  height: 1px;
  background: var(--line);
  position: relative;
  margin: var(--s-7) 0;
}
.l-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 5px; height: 5px;
  background: var(--champagne);
  transform: translateX(-50%) rotate(45deg);
}