/* ============================================================
   ATELIER — design tokens & base styles
   A refined, editorial system. Deliberately divergent from the
   Salient/Nectar "warm-bone + orange-gradient + Poppins" look:
     SERIF display (not all-sans) · COOL base (not warm bone)
     FLAT jewel accent (not a gradient) · airy (not WPBakery-dense)
   Values marked /* derived */ were tuned by hand (tints/states);
   the rest are the locked brand stops.
   ============================================================ */

:root {
  /* ── Neutrals (cool, blue-leaning — NOT Nova's warm bone) ──── */
  --ink:         #14161A; /* blue-black, primary text + dark UI    */
  --ink-muted:   #565B66; /* derived: secondary / caption text     */
  --porcelain:   #F4F5F7; /* primary background, cool not warm      */
  --grey-soft:   #E9EBEF; /* alt section surface / cards            */
  --line:        #DADDE3; /* derived: hairline borders & rules      */
  --white:       #FFFFFF;

  /* ── Accent: ONE flat jewel (no gradient) ──────────────────── */
  --emerald:       #0F6B4F; /* the single shout — links, CTAs       */
  --emerald-hover: #0B5740; /* derived: darker for :hover/:active   */
  --emerald-wash:  #E7F0EC; /* derived: pale fill for highlights    */
  /* optional second jewel if you ever need one — keep it rare:
     --aubergine:  #3B1E47;                                          */

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* high-contrast serif */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 600; /* Fraunces reads heavy enough at 600 in display sizes */

  /* Fluid scale — serif display wants a calmer rhythm than Nova's
     viewport-filling fit-text; ramps but never shouts. */
  --text-caption: 0.8125rem;
  --text-body:    1.0625rem;                              /* ~17px, editorial body */
  --text-lead:    clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --text-h3:      clamp(1.5rem,   1.25rem + 1.1vw, 2.125rem);
  --text-h2:      clamp(2rem,     1.55rem + 2.1vw, 3.25rem);
  --text-h1:      clamp(2.75rem,  1.9rem + 4vw,    4.75rem);
  --text-display: clamp(3.25rem,  2.2rem + 6vw,    6.5rem); /* hero — big but not edge-to-edge */

  --leading-tight: 1.08;  /* display serif headlines */
  --leading-snug:  1.2;
  --leading-body:  1.65;  /* airy reading measure */
  --tracking-display: -0.012em; /* serifs need only a hair of negative tracking */
  --tracking-caption:  0.04em;  /* small caps / labels open up */
  --measure: 68ch;              /* max reading width */

  /* ── Form & feel: crisp, not pill; airy, not dense ─────────── */
  --radius:      0.1875rem; /* 3px — barely-there, the anti-pill   */
  --radius-card: 0.5rem;    /* 8px for larger surfaces             */
  --space-section: clamp(4rem, 3rem + 8vw, 9rem); /* generous vertical air */
  --shadow-soft: 0 1px 2px rgba(20,22,26,.04), 0 8px 24px rgba(20,22,26,.06);

  /* ── Motion: refined = slower, fewer, soft easing ──────────── */
  --dur: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* gentle expo-out */
}

/* ── Base layer ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  /* Let the browser drive Fraunces' optical-size axis from font-size —
     small text stays sturdy, display text gets the high-contrast bite. */
  font-optical-sizing: auto;
  margin: 0 0 .5em;
}
h1, .display { font-size: var(--text-h1); }
.display     { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }

p { max-width: var(--measure); }

.lead { font-size: var(--text-lead); color: var(--ink-muted); max-width: var(--measure); }

.eyebrow { /* small uppercase label — pairs with serif headlines */
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--emerald);
}

a {
  color: var(--emerald);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--emerald-hover); }

/* Button — crisp rectangle, flat jewel fill, no gradient, no pill */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--text-body);
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--emerald); color: var(--white);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--emerald-hover); }
.btn:active { transform: translateY(1px); }
.btn--ghost { /* secondary: hairline, ink text */
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); background: transparent; }

.section { padding-block: var(--space-section); }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
hr { border: 0; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}

/* ============================================================
   DARK THEME
   Apply explicitly with <html data-theme="dark">, or let it
   follow the OS via the media query below. Because every surface
   reads from a semantic token, this one block flips the system.
   The jewel brightens (a dark emerald would vanish on dark).
   ============================================================ */
[data-theme="dark"] {
  --ink:         #E9EBEF; /* text inverts to near-white          */
  --ink-muted:   #9AA1AD;
  --porcelain:   #0E1116; /* page ground                          */
  --grey-soft:   #161A20; /* raised surface                       */
  --line:        #2A2F38;
  --white:       #161A20; /* "card"/control fill on dark          */
  --emerald:       #34C08A; /* brightened jewel for dark contrast */
  --emerald-hover: #57D2A3;
  --emerald-wash:  #12241D;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
}
/* Auto-follow OS unless the user has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E9EBEF; --ink-muted: #9AA1AD; --porcelain: #0E1116;
    --grey-soft: #161A20; --line: #2A2F38; --white: #161A20;
    --emerald: #34C08A; --emerald-hover: #57D2A3; --emerald-wash: #12241D;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
  }
}