/* ============================================================
   + Advantage — Colors & Type
   Direction A · "Terra" (terracotta & clay)
   Font family wired in fonts.css (local Montserrat 100–900)
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --espresso:     #3C2415;  /* primary ink, from brand mark */
  --espresso-700: #563824;
  --ink-soft:     #6E5847;  /* secondary text */
  --ink-faint:    #9A8775;  /* tertiary / captions */

  --terra:        #C75F3F;  /* primary accent — terracotta */
  --terra-deep:   #8A3D26;  /* pressed / gradient end */
  --terra-tint:   #F6E3DA;  /* terracotta wash */

  --ochre:        #E0A23E;  /* secondary accent — warm gold */
  --ochre-deep:   #B97E22;
  --ochre-tint:   #F8EBD2;

  --cream:        #F8F1E7;  /* page background */
  --clay:         #F2E4D6;  /* raised tint / pills */
  --line:         #E7DBCB;  /* hairline borders */
  --surface:      #FFFFFF;  /* cards / sheets */

  /* ---- Semantic ---- */
  --bg:           var(--cream);
  --fg1:          var(--espresso);
  --fg2:          var(--ink-soft);
  --fg3:          var(--ink-faint);
  --accent:       var(--terra);
  --accent-2:     var(--ochre);
  --on-accent:    #FFFFFF;

  /* ---- Type ---- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-x:     800;
  --fw-black: 900;

  /* fluid-ish scale (document) */
  --t-display: 800 44px/1.04 var(--font);
  --t-h1:      800 30px/1.12 var(--font);
  --t-h2:      800 20px/1.25 var(--font);
  --t-h3:      700 16px/1.3  var(--font);
  --t-body:    400 15px/1.7  var(--font);
  --t-small:   500 12.5px/1.5 var(--font);
  --t-eyebrow: 700 11px/1.2  var(--font);

  /* ---- Radii / shadow / spacing ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 14px -8px rgba(60,36,21,0.35);
  --shadow-md: 0 14px 34px -18px rgba(60,36,21,0.40);
  --shadow-lg: 0 28px 60px -28px rgba(60,36,21,0.45);

  --space: 8px;
}

/* ---- Base element styles (opt-in) ---- */
.adv-eyebrow { font: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.adv-h1 { font: var(--t-h1); letter-spacing: -0.02em; color: var(--fg1); margin: 0; }
.adv-h2 { font: var(--t-h2); letter-spacing: -0.01em; color: var(--fg1); margin: 0; }
.adv-h3 { font: var(--t-h3); color: var(--fg1); margin: 0; }
.adv-body { font: var(--t-body); color: var(--fg2); }
.adv-small { font: var(--t-small); color: var(--fg3); }