/* ============================================================
   ROOT AND REIGN — colors_and_type.css  (v2 — mood-board aligned)
   The Laboratory Porch design foundation.
   Import this file first in any page; then layer component CSS.
   ============================================================ */

/* -------- Fonts (Google Fonts CDN; swap for licensed .woff2 in prod) --------
   Cinzel              — brand mark, logo lockup, primary display headers, section titles
   Cormorant Garamond  — editorial headings, secondary display text, tagline
   Inter               — all body copy, UI
   IBM Plex Mono       — ingredient names, chemical notation, lab labels ONLY
*/
/* Promoted 2026-04-28: Playfair Display (display) + Allura (script) added.
   Cinzel retained for legacy logo lockups only — Playfair is the new authority. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Allura&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ===========================================================
     COLOR — The Laboratory Porch palette (from mood board)
     =========================================================== */
  --obsidian:          #0A0A0A;  /* Clinical Obsidian — primary bg */
  --obsidian-raised:   #121212;  /* card on obsidian */
  --obsidian-sunken:   #050505;  /* recessed (inputs, wells) */

  --abyssal:           #121734;  /* Abyssal Blue — hero plates, full-bleed section bg */
  --abyssal-raised:    #1A2045;  /* card on abyssal */
  --abyssal-sunken:    #0B0F24;

  --ochre:             #C9922A;  /* Powerful Ochre/Gold — heritage accent */
  --ochre-deep:        #A8791F;  /* pressed state */
  --ochre-soft:        #E3B558;  /* hover-light */

  --silver:            #C0C0C0;  /* Afronautic Silver */
  --silver-dim:        #8A8A8A;

  --bone:              #F5F2EC;  /* Off-white — primary body text on dark */
  --bone-muted:        #C9C4B8;
  --bone-dim:          #8A867C;

  /* ===========================================================
     PUBLICATION GROUND (promoted 2026-04-28 from warmth-pilot-v2)
     The two-ground system: sand for publication surfaces (landing,
     education, articles, social, footer); obsidian for instrument
     surfaces (evaluator, ingredient analysis). Rule of alternation:
     sand = invitation. obsidian = correction.
     =========================================================== */

  /* Sand — warm cream, the publication ground */
  --sand:              #F2EAD8;  /* primary publication bg */
  --sand-raised:       #FBF6E8;  /* lit cream, cards on sand */
  --sand-sunken:       #E6DCC4;  /* recessed wells on sand */

  /* Ink — warm near-black, body text on sand
     (replaces the cooler --ink #141210 from the canonical "Porch")
     Contrast pass 2026-04-29: --ink-muted and --ink-dim were tested under
     bright daylight bulbs and read soft. Darkened to clear WCAG AA on the
     sand ground. Hue family preserved. --ink unchanged. */
  --ink:               #1A1814;  /* warm near-black */
  --ink-muted:         #3F392F;  /* warm secondary on sand — ~9.5:1 */
  --ink-dim:           #6B6354;  /* warm tertiary on sand  — ~4.7:1 */

  /* Clay — terracotta-brown, skin-adjacent, pottery.
     Used as the sand-ground accent the way Ochre is on obsidian:
     mast underline, primary CTAs on sand, hover affordances. */
  --clay:              #B5694A;
  --clay-soft:         #D08A6B;
  --clay-deep:         #8E4A30;

  /* Sage — dusty herbal green, the only green in the system.
     Reserved for editorial signals (status dots, dateline marks,
     "in development" cues). Never as a base. */
  --sage:              #7A8B6F;
  --sage-soft:         #9BAA8E;
  --sage-deep:         #56664C;

  /* Lines on sand — warm hairlines that don't read as cool gray */
  --line-sand:         rgba(26, 24, 20, 0.12);
  --line-sand-strong:  rgba(26, 24, 20, 0.28);
  --line-clay:         rgba(181, 105, 74, 0.30);
  --line-sage:         rgba(122, 139, 111, 0.35);

  /* Legacy "Porch" alias — older components reference these.
     Now point to the new sand surfaces so promotion is non-breaking. */
  --porch:             #F2EAD8;  /* was #F5F2EC */
  --porch-raised:      #FBF6E8;
  --porch-sunken:      #E6DCC4;

  /* Semantic — evaluator verdicts only; not brand colors */
  --safe:              #6B8E4E;
  --safe-bg:           #1A2214;
  --caution:           #D9A441;
  --caution-bg:        #24190A;
  --avoid:             #B5432A;
  --avoid-bg:          #24100A;
  --info:              #7A96A8;
  --info-bg:           #111820;

  --line:              #1F1F1F;
  --line-raised:       #2A2A2A;
  --line-abyssal:      #1E2548;
  --line-ochre:        rgba(201, 146, 42, 0.35);
  --line-silver:       rgba(192, 192, 192, 0.18);

  --focus-ring:        rgba(201, 146, 42, 0.55);
  --selection-bg:      rgba(201, 146, 42, 0.25);

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */
  /* Promoted 2026-04-28:
     --font-display is now PLAYFAIR (was Cormorant). Same authority, warmer,
     more rounded. Cormorant retained as --font-pull for italic pull-quotes.
     Cinzel kept as --font-brand for legacy lockups; Playfair Display is the
     new wordmark face going forward.
     --font-script (Allura) is the human-warmth note. Use 3-4 instances per
     page MAX — taglines, signatures, ampersand. Overuse kills the brand. */
  --font-brand:        'Cinzel', 'Trajan Pro', 'Playfair Display', 'Cormorant Garamond', Georgia, serif; /* @kind font */
  --font-display:      'Playfair Display', 'Iowan Old Style', Georgia, serif; /* @kind font */
  --font-pull:         'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; /* @kind font */
  --font-script:       'Allura', 'Sunday Script', cursive; /* @kind font */
  --font-body:         'Source Serif 4', 'Iowan Old Style', Georgia, serif; /* @kind font */
  --font-ui:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */
  --font-mono:         'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* @kind font */

  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-heavy:   800; /* @kind other */

  /* Type scale — fluid headings */
  --fs-hero:    clamp(2.75rem, 6vw + 1rem, 5.5rem);    /* @kind other */ /* 44–88px */
  --fs-h1:      clamp(2.25rem, 4vw + 1rem, 4rem);      /* @kind other */ /* 36–64px */
  --fs-h2:      clamp(1.75rem, 2.5vw + 1rem, 2.75rem); /* @kind other */ /* 28–44px */
  --fs-h3:      1.5rem;      /* @kind other */
  --fs-h4:      1.25rem;     /* @kind other */
  --fs-body-l:  1.125rem;    /* @kind other */
  --fs-body:    1rem;        /* @kind other */
  --fs-body-s:  0.9375rem;   /* @kind other */
  --fs-caption: 0.8125rem;   /* @kind other */
  --fs-micro:   0.6875rem;   /* @kind other */

  --lh-tight:   1.08;  /* @kind other */
  --lh-snug:    1.2;   /* @kind other */
  --lh-body:    1.6;   /* @kind other */
  --lh-long:    1.75;  /* @kind other */

  --tr-tight:   -0.01em; /* @kind other */
  --tr-normal:  0;        /* @kind other */
  --tr-brand:   0.18em;   /* @kind other */ /* Cinzel needs space — Roman-capitals face */
  --tr-label:   0.14em;   /* @kind other */
  --tr-mono:    0.01em;   /* @kind other */

  /* ===========================================================
     SPACING — 4px base
     =========================================================== */
  --sp-0: 0; /* @kind spacing */  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ===========================================================
     RADII — sharp corners signal clinical precision
     =========================================================== */
  --r-0:    0; /* @kind radius */
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-pill: 999px;

  /* ===========================================================
     SHADOWS / ELEVATION
     =========================================================== */
  --shadow-1:  0 1px 0 rgba(0,0,0,0.4);
  --shadow-2:  0 8px 24px -12px rgba(0,0,0,0.8);
  --shadow-3:  0 20px 40px -16px rgba(0,0,0,0.9);
  --glow-ochre: 0 0 0 1px rgba(201,146,42,0.35), 0 12px 32px -12px rgba(201,146,42,0.25);
  --rim-silver: inset 0 0 0 1px rgba(192,192,192,0.18); /* @kind shadow */
  --rim-ochre:  inset 0 0 0 1px rgba(201,146,42,0.4);   /* @kind shadow */

  /* ===========================================================
     MOTION — laboratory instruments. No bounces.
     =========================================================== */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);          /* @kind other */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);          /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-med:    240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --container-max:     1200px; /* @kind spacing */
  --container-prose:   68ch;   /* @kind spacing */
  --container-narrow:  520px;  /* @kind spacing */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

/* Brand / logo lockups — Cinzel, all-caps, wide tracking */
.r-brand {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-brand);
  color: var(--ochre);
}

/* Eyebrow / lab label — mono with ochre hairline */
.r-eyebrow,
.r-lab-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--silver);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.r-lab-label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--ochre);
}

/* Hero — editorial serif, high contrast */
.r-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--bone);
  text-wrap: balance;
}

.r-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--bone);
  text-wrap: balance;
}

.r-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--bone);
  text-wrap: balance;
}

/* Section title — Cinzel, upper, tracked. Used on page-level titles / posters. */
.r-section-title {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-brand);
  text-transform: uppercase;
  color: var(--bone);
}

.r-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--bone);
}

.r-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--bone);
}

.r-lede {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--bone-muted);
  text-wrap: pretty;
}

.r-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bone);
  text-wrap: pretty;
}

.r-body-long {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-long);
  color: var(--bone);
  max-width: var(--container-prose);
}

.r-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--bone-dim);
}

.r-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-mono);
  color: var(--silver);
}

.r-ingredient {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  color: var(--bone);
}

/* Italic Cormorant — Doctor Djeli voice (Aunt Viv characterization) */
.r-djeli {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 1.5rem;
  line-height: var(--lh-snug);
  color: var(--ochre-soft);
  text-wrap: balance;
}

/* Tagline — used on posters / lockups — Cormorant italic */
.r-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--bone-muted);
  letter-spacing: 0.01em;
}

/* ============================================================
   BASE RESETS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--obsidian);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--bone); }

h1 { font: var(--fw-medium) var(--fs-h1) / var(--lh-tight) var(--font-display); letter-spacing: var(--tr-tight); margin: 0; }
h2 { font: var(--fw-medium) var(--fs-h2) / var(--lh-snug)  var(--font-display); letter-spacing: var(--tr-tight); margin: 0; }
h3 { font: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-display); margin: 0; }
h4 { font: var(--fw-semibold) var(--fs-h4) / var(--lh-snug) var(--font-body); margin: 0; }

p { margin: 0; }

a {
  color: var(--ochre);
  text-decoration: none;
  border-bottom: 1px solid var(--line-ochre);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--ochre-soft); border-bottom-color: var(--ochre-soft); }

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

hr {
  border: 0;
  height: 1px;
  background: var(--line-ochre);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ============================================================
   PUBLICATION GROUND — sand surface classes (promoted 2026-04-28)
   The two-ground system: apply .r-page--sand to a page wrapper to
   flip body color, link color, focus ring, and selection to the
   warm register. /evaluate stays on the default obsidian ground.
   ============================================================ */

.r-page--sand {
  background: var(--sand);
  color: var(--ink);
}
.r-page--sand ::selection { background: rgba(181, 105, 74, 0.22); color: var(--ink); }
.r-page--sand a {
  color: var(--clay-deep);
  border-bottom-color: var(--line-clay);
}
.r-page--sand a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.r-page--sand hr { background: var(--line-clay); }

/* Section utility — paint a single section sand without flipping the page */
.r-surface--sand   { background: var(--sand);          color: var(--ink); }
.r-surface--sand-r { background: var(--sand-raised);   color: var(--ink); }
.r-surface--sand-s { background: var(--sand-sunken);   color: var(--ink); }
.r-surface--obsidian { background: var(--obsidian);    color: var(--bone); }
.r-surface--abyssal  { background: var(--abyssal);     color: var(--bone); }

/* === Sand-ground type classes — Playfair primary, ink color === */

/* Editorial dateline — the "masthead" mark above a hero */
.r-dateline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-brand);
  color: var(--ink-dim);
}
.r-dateline::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--clay);
}
.r-dateline__pub {
  color: var(--clay);
  letter-spacing: var(--tr-brand);
}

/* Eyebrow on sand — same mono micro, but warm */
.r-eyebrow--sand,
.r-lab-label--sand {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.r-lab-label--sand::before {
  content: '';
  width: 16px; height: 1px;
  background: var(--clay);
}

/* Hero — Playfair, 500, deep ink, italic accent in clay-deep */
.r-hero--sand {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  text-wrap: balance;
}
.r-hero--sand em {
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--clay-deep);
}

.r-h1--sand,
.r-h2--sand,
.r-h3--sand {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: var(--tr-tight);
}
.r-h1--sand { font-weight: var(--fw-medium);   font-size: var(--fs-h1); line-height: var(--lh-tight); }
.r-h2--sand { font-weight: var(--fw-medium);   font-size: var(--fs-h2); line-height: var(--lh-snug); }
.r-h3--sand { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.r-h1--sand em,
.r-h2--sand em,
.r-h3--sand em { font-style: italic; color: var(--clay-deep); font-weight: inherit; }

/* Lede / dek — Cormorant italic for editorial weight */
.r-dek--sand {
  font-family: var(--font-pull);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  text-wrap: pretty;
  max-width: 56ch;
}

/* Body / long-form on sand */
.r-body--sand {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.r-body-long--sand {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-long);
  color: var(--ink);
  max-width: var(--container-prose);
}

/* Caption / metadata on sand */
.r-caption--sand {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--ink-dim);
}

/* The Allura script — sparingly. Tagline closer, signature, brand
   ampersand. Never base copy. Never more than 3-4 instances per page. */
.r-script {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  font-style: normal;
  color: var(--clay);
  line-height: 1;
  letter-spacing: 0.005em;
}

/* Wordmark — for use in mast/footer when not the SVG lockup.
   Playfair Bold + Allura ampersand. */
.r-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
  text-transform: none;
}
.r-wordmark .amp {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  color: var(--clay);
  letter-spacing: 0;
  margin: 0 0.15em;
  vertical-align: -0.12em;
  font-size: 1.4em;
  line-height: 0;
}

/* Buttons on sand — primary is ink-on-cream, hover shifts to clay-deep */
.r-btn--sand-primary {
  background: var(--ink);
  color: var(--sand-raised);
  border: 1px solid var(--ink);
}
.r-btn--sand-primary:hover  { background: var(--clay-deep); border-color: var(--clay-deep); }
.r-btn--sand-primary:active { background: var(--ink); border-color: var(--ink); }

.r-btn--sand-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-sand-strong);
}
.r-btn--sand-secondary:hover  { border-color: var(--ink); background: rgba(26,24,20,0.04); }
.r-btn--sand-secondary:active { background: rgba(26,24,20,0.08); }

/* Card on sand */
.r-card--sand {
  background: var(--sand-raised);
  border: 1px solid var(--line-sand);
  border-radius: var(--r-2);
  padding: var(--sp-6);
  color: var(--ink);
}
.r-card--sand:hover { border-color: var(--line-sand-strong); }

/* Hairline divider with clay tick — sand-ground sibling of .r-divider-tick */
.r-divider-tick--sand {
  height: 1px;
  background: var(--line-sand);
  position: relative;
  margin: var(--sp-8) 0;
}
.r-divider-tick--sand::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 40px; height: 3px;
  background: var(--clay);
}