/* ============================================================
   DESCRY — Foundations: Color + Type
   PRIMARY BRAND = the "lab identity" (uploads/descry-lab-v5.html):
   warm paper canvas, pine + chartreuse + gold, Bricolage Grotesque
   display over Hanken Grotesk text, the eye-and-curl mark.
   The old dark product theme is LEGACY — see --legacy-* at the end.
   ============================================================ */

/* Hanken Grotesk — functional text (CDN; upload a file to self-host) */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&display=swap");

/* Bricolage Grotesque — display + voice, self-hosted variable */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* ---- Surfaces (warm paper) ---- */
  --paper:   #E7EFDF;  /* page — the relief, room to breathe */
  --paper-2: #DCE8D2;  /* slightly deeper paper */
  --mist:    #F1F6EB;  /* card / panel fill */
  --cloud:   #EDF4E4;  /* near-white — text on dark, highlights */

  /* ---- Pine — "the ink, everything" (structure + text) ---- */
  --pine:         #2E726A;  /* primary green · hair in shadow */
  --pine-deep:    #1A4A44;  /* headings, deep panels */
  --pine-darkest: #102E2A;  /* the deep voice block background */
  --ink:          #163E39;  /* body text */
  --ink-soft:     #365A52;  /* secondary text */

  /* ---- Chartreuse — "alive, seen · hair in light" ---- */
  --char:        #CDEC97;  /* chartreuse */
  --char-bright: #D8F2A6;  /* brighter chartreuse */
  --char-hair:   #A9CC6A;  /* strand green (the hairfield) */

  /* ---- Gold — "her eyes, the spark · once, never twice" ---- */
  --gold:        #D2B65F;  /* the iris / the single warm note */
  --gold-bright: #EBD183;  /* gold on dark */
  --gold-deep:   #9A7C2E;  /* roman numerals, small marks */

  /* ---- Slate — "a quiet aside · rare" ---- */
  --slate: #6E83A6;

  /* Deliberately ABSENT: cream & coral. The beige was the uniform;
     the red was the empire. Neither belongs here. Do not introduce them. */

  /* ---- Hairlines ---- */
  --line:      rgba(46, 114, 106, 0.22); /* pine @ 22% — dividers */
  --line-soft: rgba(46, 114, 106, 0.12);

  /* ---- Type families ---- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* display + voice */
  --font-sans:    "Hanken Grotesk", system-ui, sans-serif;      /* everything functional */
  --font-mono:    "SFMono-Regular", ui-monospace, Consolas, monospace;

  /* ---- Type scale (display = Bricolage; tight & confident) ---- */
  --fs-hero:    clamp(84px, 17vw, 250px); /* the "descry." hero */
  --fs-h2:      clamp(34px, 6vw, 72px);   /* section headlines */
  --fs-voice:   clamp(30px, 5.6vw, 62px); /* deep voice lines */
  --fs-disp-sm: clamp(44px, 7.4vw, 86px); /* type specimen */
  --fs-hero-line: clamp(24px, 3.4vw, 46px); /* hero sub-line */
  --fs-h3:      24px;   /* field title */
  --fs-h4:      21px;   /* card sub-head */
  --fs-prose:   18px;   /* body copy */
  --fs-body:    15.5px; /* dense body */
  --fs-kicker:  12px;   /* uppercase eyebrow */
  --fs-meta:    12.5px; /* captions */

  /* ---- Weights (Bricolage looks best 400–600; Hanken 300–500) ---- */
  --fw-light:   300;  /* Hanken body default */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;  /* display headings */

  /* ---- Letter-spacing ---- */
  --ls-hero: -0.045em;
  --ls-h2:   -0.035em;
  --ls-tight:-0.02em;
  --ls-kick:  0.16em;  /* uppercase kickers */

  /* ---- Line heights ---- */
  --lh-hero: 0.82;
  --lh-h2:   0.98;
  --lh-body: 1.7;

  /* ---- Radii (soft, generous — the lab is rounded) ---- */
  --radius-sm: 14px;
  --radius:    24px;  /* default card */
  --radius-lg: 26px;  /* identity cards */
  --radius-xl: 30px;  /* hero stages */

  /* ---- Motion (slow, organic, unhurried) ---- */
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 1s;
  --dur-hover: 0.25s;

  /* ---- Layout ---- */
  --inner: 1180px;
  --gutter: 6vw;

  /* ============================================================
     LEGACY — old dark product theme (descry-website, now outdated).
     Kept only for reference / legacy surfaces. Do NOT use by default.
     ============================================================ */
  --legacy-bg: #02070d;
  --legacy-blue: #1267ff;
  --legacy-amber: #f7c25e;
  --legacy-red: #ff554f;
  --legacy-green: #31d98a;
  --legacy-text: #f7f9ff;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply .ds-* or copy onto real elements.
   ============================================================ */

.ds-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
}

/* The signature soft radial washes behind everything */
.ds-wash-char { background: radial-gradient(circle, var(--char), transparent 66%); }
.ds-wash-pine { background: radial-gradient(circle, var(--pine), transparent 64%); }

.ds-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--pine-deep);
}
.ds-hero .dot, .ds-dot { color: var(--gold); }

.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--pine-deep);
}
.ds-h2 .g, .ds-green { color: var(--pine); }

.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  color: var(--pine-deep);
}

.ds-kicker {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kick);
  text-transform: uppercase;
  color: var(--pine);
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.ds-kicker .rn { color: var(--gold-deep); } /* roman numeral */

.ds-prose {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.ds-prose strong { color: var(--pine-deep); font-weight: var(--fw-medium); }

/* A typical mist card */
.ds-card {
  background: var(--mist);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform var(--dur-hover) var(--ease-rise), background var(--dur-hover) var(--ease-rise);
}
.ds-card:hover { transform: translateY(-4px); background: #fff; }

/* Rise-in reveal */
@keyframes ds-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ds-rise { animation: ds-rise var(--dur-reveal) var(--ease-rise) forwards; }