/* ============================================================
   TRIBUNDANT MARKETING LLC — DESIGN TOKENS
   Controlling source: Project Knowledge 00, 18
   ============================================================ */

:root {
  /* ---- Brand color: primary ---- */
  --tm-garnet:        #8F1D2C;
  --tm-garnet-dark:   #6E1520;
  --tm-garnet-tint:   #F4E6E8;
  --tm-steel:         #48515A;
  --tm-steel-dark:    #2B3138;
  --tm-steel-darker:  #1E2226;
  --tm-cream:         #E8DFCE;
  --tm-cream-tint:    #F5F1E7;
  --tm-offwhite:      #FBFAF6;

  /* ---- Brand color: supporting ecosystem (sparing use) ---- */
  --tm-navy:          #14307A;
  --tm-gold:          #D9A031;
  --tm-green:         #3F9E52;

  /* ---- Text ---- */
  --tm-text:          #1B1D1F;
  --tm-text-secondary:#48515A;
  --tm-text-muted:    #6B7178;
  --tm-text-inverse:  #F5F1E7;
  --tm-text-inverse-muted: #C8CDD2;

  /* ---- Surfaces ---- */
  --tm-surface-cream:   var(--tm-cream);
  --tm-surface-light:   var(--tm-offwhite);
  --tm-surface-dark:    var(--tm-steel-darker);
  --tm-surface-white:   #FFFFFF;
  --tm-border:          #DBD3C2;
  --tm-border-dark:     rgba(245, 241, 231, 0.14);

  /* ---- Typography ---- */
  --tm-font-body: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tm-font-display: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --tm-h1: clamp(2.25rem, 1.7rem + 2.4vw, 4.2rem);
  --tm-h2: clamp(1.85rem, 1.5rem + 1.5vw, 2.9rem);
  --tm-h3: clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
  --tm-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.5rem);
  --tm-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
  --tm-body: 1.0625rem;
  --tm-small: 0.9rem;
  --tm-eyebrow: 0.8rem;

  /* ---- Spacing scale ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ---- Radius ---- */
  --radius-card: 20px;
  --radius-button: 12px;
  --radius-input: 10px;
  --radius-image: 20px;
  --radius-chip: 999px;

  /* ---- Shadow ---- */
  --shadow-low: 0 1px 2px rgba(27, 29, 31, 0.06), 0 1px 1px rgba(27,29,31,0.04);
  --shadow-card: 0 10px 30px -12px rgba(27, 29, 31, 0.18);
  --shadow-elevated: 0 24px 60px -20px rgba(27, 29, 31, 0.28);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 760px;
  --header-height: 84px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 68px;
  }
}