/* tokens.css — Thryvest design tokens, anchored to thryvest-landing.html (the north-star).
 *
 * STEP 1 (additive, zero-risk): this file is LINKED before each page's inline <style>, so any
 * variable a page also defines in its own :root still WINS (later declaration, same specificity) —
 * nothing renders differently until pages migrate to these tokens in step 2.
 *
 * Link order on every page:  <link rel="stylesheet" href="/css/tokens.css">  THEN the page <style>.
 */

:root {
  /* ---- Families & weights ---- */
  --ff-serif: 'Lora', Georgia, serif;
  --ff-sans:  'DM Sans', -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Color: brand (landing-exact) ---- */
  --cream: #FAF8F3;
  --sand: #EFE8D8;
  --warm-white: #FFFDF9;
  --clay: #D4B896;                 /* GOLD accent — the italic emphasis + eyebrow */
  --terracotta: #C4714A;
  --terracotta-dark: #A85A38;
  --terracotta-light: #FEF0E8;
  --forest: #2D4A3E;
  --forest-light: #3D6154;
  --charcoal: #252525;
  --mid-gray: #6A6A6A;
  --light-gray: #B0A89A;
  --green-accent: #4A8C6F;
  --green-light: #E8F4EE;
  --green-mid: #C2DDD1;

  /* ---- Color: on-dark text (white@opacity, per the landing — NOT cream #F5F1E8) ---- */
  --on-dark: rgba(255,255,255,0.92);
  --on-dark-muted: rgba(255,255,255,0.70);
  --on-dark-faint: rgba(255,255,255,0.45);

  /* ---- Color: app extensions (status + CFO; not part of the marketing vocabulary) ---- */
  --mint: #A8D5BA;                 /* score / status "good" — currently hardcoded across app pages */
  --amber: #E8B98A;                /* score / status "attention" */
  --gold-panel: #EFE4CF;           /* CFO read callout surface (spec §3); harmonizes with --clay */
  --gold-accent: #C9A86A;
  --gold-text: #8A6D3B;
  --gold-text-dark: #5C4A24;
  --gold-btn: #A87C32;             /* CFO action button on the gold panel (hover → --gold-text) */

  /* ---- Type scale (px values are the landing's actual sizes) ---- */
  --fs-hero: clamp(34px, 4vw, 54px);      /* marketing h1 */
  --fs-section: clamp(30px, 3.5vw, 46px); /* marketing section title */
  --fs-display: 56px;                     /* THE big number ($1,847) */
  --fs-page-title: 28px;                  /* in-app <h1> */
  --fs-card-title: 20px;                  /* card heading */
  --fs-stat: 28px;                        /* in-app stat number */
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-13: 13px;
  --fs-eyebrow: 11px;
  --fs-caption: 12px;

  /* ---- Radius & shadow (landing-exact) ---- */
  --radius-pill: 100px;
  --radius-card: 20px;
  --radius-control: 12px;
  --shadow-card: 0 20px 60px rgba(45,74,62,0.12);
  --shadow-float: 0 40px 100px rgba(0,0,0,0.25);
  --sidebar-width: 260px;
}

/* ---- Role classes (pages opt in during step 2; unused = inert until then) ---- */
.t-hero          { font-family: var(--ff-serif); font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: 1.1; }
.t-section-title { font-family: var(--ff-serif); font-size: var(--fs-section); font-weight: var(--fw-bold); line-height: 1.15; color: var(--forest); }
.t-page-title    { font-family: var(--ff-serif); font-size: var(--fs-page-title); font-weight: var(--fw-bold); color: var(--forest); }
.t-card-title    { font-family: var(--ff-serif); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); color: var(--forest); }
.t-number        { font-family: var(--ff-serif); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -1px; color: var(--forest); }
.t-stat          { font-family: var(--ff-serif); font-size: var(--fs-stat); font-weight: var(--fw-bold); color: var(--forest); }
.t-eyebrow       { font-family: var(--ff-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: 1.5px; text-transform: uppercase; color: var(--light-gray); }
.t-eyebrow--accent { color: var(--terracotta); letter-spacing: 2px; }   /* section labels */
.t-body          { font-family: var(--ff-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 1.6; color: var(--charcoal); }
.t-caption       { font-family: var(--ff-sans); font-size: var(--fs-caption); color: var(--mid-gray); }

/* ---- THE signature: italic-gold serif emphasis (brand asset; app starts using in step 2) ---- */
.t-emphasis        { font-style: italic; color: var(--clay); }        /* on dark / hero */
.t-emphasis--light { font-style: italic; color: var(--terracotta); }  /* on light sections */
/* <em> inside a serif heading inherits the emphasis (scoped to t- headings — never bare <em>) */
.t-hero em, .t-page-title em, .t-card-title em { font-style: italic; color: var(--clay); }
.t-section-title em { font-style: italic; color: var(--terracotta); }

/* ---- Gold "CFO voice" eyebrow pill (the landing's .hero-eyebrow) ---- */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-sans); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: .5px; text-transform: uppercase; color: var(--clay);
  background: rgba(212,184,150,0.15); border: 1px solid rgba(212,184,150,0.3);
  padding: 7px 16px; border-radius: var(--radius-pill);
}

/* ---- Primary CTA (the landing's terracotta pill) ---- */
.btn-primary {
  background: var(--terracotta); color: #fff; border: none; border-radius: var(--radius-pill);
  font-family: var(--ff-sans); font-size: 16px; font-weight: var(--fw-semibold);
  padding: 16px 36px; cursor: pointer; transition: all .2s; text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,113,74,0.4); }