/* =====================================================================
   VAMIKA BUILDERS — BRAND GUIDELINE
   ---------------------------------------------------------------------
   Single source of truth for brand identity.
   Mirrors the official Brand Guideline PDF (palette, typography, voice).
   Load BEFORE vamika.css so vamika.css can reference these tokens.
   ===================================================================== */

:root {
  /* -----------------------------------------------------------------
     BRAND PALETTE — v3 LIGHT VERSION (round 3 — white-dominant)
     Primary surface is pure WHITE for a clean modern editorial feel.
     Cream is now a whisper-warm accent (cream-bone), used sparingly for
     visual rhythm on alternating sections. The richer --brand-cream tone
     is reserved for HERO photo-overlay text and small accent moments. */
  --brand-primary:  #FFFFFF;   /* Pure white — primary canvas */
  --brand-accent:   #FACB3F;   /* Brand yellow — accent / highlight */
  --brand-cream:    #F2E9D6;   /* Cream — reserved for hero text + select accent moments */
  --brand-moss:     #6D8E6E;   /* Moss — supporting accent */

  /* Tonal derivations — subtle off-whites + creams for occasional warmth */
  --brand-primary-soft:     #FAF7EF;   /* faint warm white — footer / banded surfaces */
  --brand-primary-deeper:   #F3EDDD;   /* slightly warmer off-white for stronger banding */
  --brand-accent-bright:    #FDD968;
  --brand-accent-deep:      #7A6309;   /* Darker bronze-gold for strong contrast on white */
  --brand-accent-warm:      #D9B673;   /* Refined warm gold — readable on dark hero photo overlays */
  --brand-cream-warm:       #EFE3C5;
  --brand-cream-bone:       #FBF6E7;   /* very subtle cream — the new ".cream section" tone */

  /* Brand text colors — high-contrast on near-white surfaces */
  --brand-ink:              #0E0E0E;   /* Near-black for primary headings */
  --brand-ink-soft:         #5C6862;   /* Medium sage-gray for secondary heading emphasis (darker than before) */

  /* Type and rule colours — LIGHT THEME
     Surfaces are cream; text resolves dark for full contrast. */
  --brand-text-light:           #1A1A1A;                     /* dark body text on cream */
  --brand-text-light-muted:     rgba(26, 26, 26, 0.74);
  --brand-text-light-faint:     rgba(26, 26, 26, 0.52);
  --brand-text-dark:            #0E0E0E;                     /* near-black headings */
  --brand-text-dark-muted:      rgba(14, 14, 14, 0.74);
  --brand-text-dark-faint:      rgba(14, 14, 14, 0.52);
  --brand-rule-light:           rgba(26, 26, 26, 0.14);
  --brand-rule-light-strong:    rgba(26, 26, 26, 0.28);
  --brand-rule-dark:            rgba(14, 14, 14, 0.16);
  --brand-rule-dark-strong:     rgba(14, 14, 14, 0.34);

  /* -----------------------------------------------------------------
     BRAND TYPOGRAPHY — Montserrat, three weights.
     Light (300) — body
     Medium (500) — sub-heading
     Black (900) — heading
     ----------------------------------------------------------------- */
  /* --brand-font:           'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; */
  --brand-font:           "Hanken Grotesk", Sans-serif;
  --brand-weight-body:    300;
  --brand-weight-sub:     500;
  --brand-weight-heading: 900;
  --brand-letter-heading: -0.02em;
  --brand-letter-sub:     0.04em;
  --brand-letter-body:    0.005em;
}

/* =====================================================================
   GLOBAL BRAND TYPE — applies before any component CSS so headings
   and body text default to Montserrat in correct weights.
   ===================================================================== */
html, body {
  font-family: var(--brand-font);
}
body {
  font-weight: var(--brand-weight-body);
  color: var(--brand-text-light);
  letter-spacing: var(--brand-letter-body);
}

/* Heading elements inherit the brand font; specific sizes and weights
   are owned by the .h1-.h6 utility classes and by component styles
   in vamika.css. We do NOT force a global heading weight here so each
   element renders at the homepage-derived scale below. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font);
  font-style: normal;
}

/* Italic accents — brand uses no italic; preserve emphasis through
   weight / colour only. Existing .it markup stays in HTML, but the
   typographic treatment is now upright (no italic).
   !important needed to override deeply-specific vamika.css rules
   that hard-code italic on accent spans / em tags. */
.it, .it-soft, em, i.it, span.it,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
h1 .it, h2 .it, h3 .it, h4 .it, h5 .it, h6 .it,
.promise-card h4 em,
.cream .promise-card h4 em,
.cream .it,
.cream .it-soft {
  font-style: normal !important;
  /* font-weight: var(--brand-weight-heading) !important; */
}
/* Body em retains semantic emphasis but stays in body weight, upright */
p em, blockquote em, li em, dt em, dd em, span em,
.project-cred-value em, .project-tag {
  font-style: normal !important;
  font-weight: var(--brand-weight-sub) !important;
  letter-spacing: var(--brand-letter-body);
}

/* Sub-heading-level utility — Montserrat Medium */
.sub-heading, .ab-section-name, .footer-col-title,
.eyebrow, .promise-flag, .tile-status, .tile-cat,
.tile-fact, .tile-price, .tile-link, .vert-cta,
.nri-section-label, .rec-section-label,
.project-spec-label, .project-cred-label,
.project-highlight, .ab-ethos-label, .ab-pillar-icon + h4,
.btn, .nav-link, .nav-cta {
  font-family: var(--brand-font);
  font-weight: var(--brand-weight-sub);
  font-style: normal;
}

/* <strong> semantic bold — browser default is 700 (not in brand palette).
   Drop to 500 so emphasis matches the brand's sub-heading weight. */
strong, b {
  font-weight: var(--brand-weight-sub);
}

/* Body, prose, paragraph */
p, li, dd, dt, label, input, textarea, select, button,
.body, .ab-founder-bio {
  font-family: var(--brand-font);
  font-weight: var(--brand-weight-body);
  font-style: normal;
}

/* =====================================================================
   BRAND ACCENT — primary gold/yellow application
   Replaces the previous antique-gold (#D4B163) usage everywhere.
   ===================================================================== */
::selection { background: var(--brand-accent); color: var(--brand-primary); }

/* =====================================================================
   BRAND TAGLINES — utility classes (data attributes available too)
   ===================================================================== */
.brand-tagline {
  font-family: var(--brand-font);
  font-weight: var(--brand-weight-heading);
  letter-spacing: var(--brand-letter-heading);
  text-transform: uppercase;
  color: var(--brand-text-light);
}
.brand-tagline--accent { color: var(--brand-accent); }
.brand-tagline--dark   { color: var(--brand-text-dark); }

/* =====================================================================
   HOMEPAGE-DERIVED TYPOGRAPHY SCALE
   ---------------------------------------------------------------------
   The values below mirror exactly what the homepage hero / sections
   already render. They are the single source of truth for size, weight,
   line-height and tracking. Use the utility classes below on any
   heading or paragraph that needs the brand scale.
   ===================================================================== */
:root {
  /* Sizes — mirrored from index.html component rules in vamika.css.
     The ladder follows how the homepage actually uses each tag:
     .h1 = page-hero h1, .h2 = section h2, .h3 = card title, etc.
     The home-page boutique hero keeps its own larger custom size
     via the .hero-boutique h1 rule in vamika.css. */
  --type-h1-size: clamp(54px, 7.5vw, 116px);  /* .page-hero h1 — UNCHANGED (hero scale) */
  --type-h2-size: clamp(32px, 4.2vw, 58px);   /* section h2 — tightened ~30% for editorial calm */
  --type-h3-size: 28px;                       /* card title — .tile-name (was 38px) */
  --type-h4-size: 22px;                       /* sub-card — .promise-card h4 (was 30px) */
  --type-h5-size: 18px;                       /* small card — .vert-secondary-title (was 22px) */
  --type-h6-size: 16px;                       /* smallest title (was 18px) */
  --type-lead-size: clamp(20px, 2.2vw, 28px); /* editorial lead — tightened */
  --type-p-size:   1.0625rem;                 /* body — 17px (unchanged) */

  /* Weights — match homepage usage */
  --type-display-weight: 400;
  --type-card-weight:    500;
  --type-body-weight:    300;

  /* Line heights */
  --type-h1-lh: 0.92;
  --type-h2-lh: 0.94;
  --type-h3-lh: 1.04;
  --type-h4-lh: 1.18;
  --type-h5-lh: 1.3;
  --type-h6-lh: 1.35;
  --type-lead-lh: 1.35;
  --type-p-lh:  1.7;

  /* Letter-spacing — match homepage tracking ladder */
  --type-h1-tracking: -0.022em;
  --type-h2-tracking: -0.018em;
  --type-h3-tracking: -0.012em;
  --type-h4-tracking: -0.01em;
  --type-h5-tracking: -0.005em;
  --type-h6-tracking: -0.002em;
}

/* =====================================================================
   TYPOGRAPHY UTILITY CLASSES — opt-in, never universal selectors.
   Apply on the element where you want the homepage-matching scale.
   ===================================================================== */
.h1 {
  font-family: var(--brand-font);
  font-weight: var(--type-display-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-tracking);
  font-style: normal;
  margin: 0;
}
.h2 {
  font-family: var(--brand-font);
  font-weight: var(--type-display-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-tracking);
  font-style: normal;
  margin: 0;
}
.h3 {
  font-family: var(--brand-font);
  font-weight: var(--type-display-weight);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-tracking);
  font-style: normal;
  margin: 0;
}
.h4 {
  font-family: var(--brand-font);
  font-weight: var(--type-card-weight);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-tracking);
  font-style: normal;
  margin: 0;
}
.h5 {
  font-family: var(--brand-font);
  font-weight: var(--type-card-weight);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-lh);
  letter-spacing: var(--type-h5-tracking);
  font-style: normal;
  margin: 0;
}
.h6 {
  font-family: var(--brand-font);
  font-weight: var(--type-card-weight);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-lh);
  letter-spacing: var(--type-h6-tracking);
  font-style: normal;
  margin: 0;
}
.p-lead {
  font-family: var(--brand-font);
  font-weight: var(--type-display-weight);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  font-style: normal;
}
.p-body {
  font-family: var(--brand-font);
  font-weight: var(--type-body-weight);
  font-size: var(--type-p-size);
  line-height: var(--type-p-lh);
  font-style: normal;
}

/* Inline ".it" accent uses brand yellow (no italic — brand voice) */
.it { color: var(--brand-accent); }
.it-soft { color: inherit; opacity: 0.85; }

/* Body copy line-height stays generous */
p, .ab-founder-bio, .ab-origin-prose p, .ab-ethos-block p {
  line-height: var(--leading-loose, 1.7);
}