/* ============================================================
   COVALENT BOND — BRAND v2.1 TOKENS
   Single source of truth for the website palette + type.

   This file is loaded LAST (after base.css, components.css,
   mobile.css and every per-page inline <style> :root block), so
   its :root values win the cascade and every page shifts onto the
   v2.1 palette automatically. Legacy aliases (--black/--text/--s0…
   --gold-d …) are re-pointed onto the new --cb-* tokens so the
   existing CSS keeps working without per-page colour edits.

   Design intent = Covalent_Bond_Brand_System_v2_1.html:
     · Ground 70% ink/surfaces · Type 24% ivory · Gold ≤6%
     · One brand accent (gold #C9A961) · borders carry depth
     · No gradients (except the logo mark), no shadows/glow beyond
       the two approved radial gold washes.
   ============================================================ */
:root {
  /* ── v2.1 CANONICAL TOKENS ──────────────────────────── */
  /* Ground */
  --cb-ink:#0A0B0F;            /* page background */
  --cb-ink-deep:#08090C;       /* alternating sections, header, footer */
  --cb-surface:#13141B;        /* cards, panels */
  --cb-surface-raised:#181A22; /* card hover ground, chips, inputs */
  /* Accent */
  --cb-gold:#C9A961;           /* the ONLY brand accent */
  --cb-gold-tint:#E4D2A4;      /* gold hover */
  --cb-gold-soft:#B8924A;      /* pressed / soft rules */
  --cb-line-gold:rgba(201,169,97,.18);  /* card + emphasis borders */
  /* Type */
  --cb-ivory:#E8E6DF;          /* headings + primary text */
  --cb-ivory-warm:#F5F1E8;     /* knockout marks over photography ONLY */
  --cb-muted:#A6A49E;          /* paragraphs, secondary text */
  --cb-dim:#74726C;            /* captions, meta */
  --cb-faint:#5C5A55;          /* faint labels */
  --cb-disabled:#4E4D48;
  /* Structure */
  --cb-line:#252833;           /* neutral borders, dividers, table rules */
  /* Status only */
  --cb-success:#3FA66B; --cb-warning:#D98E40; --cb-critical:#D9534F;
  --cb-info:#4A90C2; --cb-ai:#9B7BC9;

  /* ── v1.x semantic names → v2.1 ─────────────────────── */
  --ink:          var(--cb-ink);
  --graphite:     var(--cb-surface);
  --gold:         var(--cb-gold);
  --ivory:        var(--cb-ivory);
  --dim:          var(--cb-muted);
  --line:         var(--cb-line-gold);
  --line-soft:    var(--cb-line);

  /* ── Legacy palette aliases → v2.1 ──────────────────────
     Existing page CSS references --black/--text/--td/--tm,
     --s0..--s3, --b1..--b3, --gold-l/-d/-f, --green/--blue.
     Re-point them so the whole site retokens with no per-page
     colour edits. ──────────────────────────────────────── */
  --black:    var(--cb-ink);            /* page ground + ink text on gold */
  --text:     var(--cb-ivory);          /* headings + primary text */
  --td:       var(--cb-muted);          /* paragraphs / secondary */
  --tm:       var(--cb-dim);            /* captions / meta */
  --s0:       var(--cb-ink-deep);       /* deep sections, header, footer */
  --s1:       var(--cb-surface);        /* cards, panels */
  --s2:       var(--cb-surface-raised); /* card hover ground */
  --s3:       #1B1D26;                  /* raised chips */
  --b1:       var(--cb-line-gold);      /* default gold hairline */
  --b2:       rgba(201,169,97,.28);     /* emphasis border */
  --b3:       rgba(201,169,97,.45);     /* hover border */
  --gold-l:   var(--cb-gold-tint);      /* gold hover */
  --gold-d:   var(--cb-gold-soft);      /* soft gold rules */
  --gold-f:   rgba(201,169,97,.07);     /* faint gold fill */
  --green:    var(--cb-success);
  --blue:     var(--cb-info);

  /* ── Page-scoped theme vars (Silk / project accents) → v2.1 ──
     Re-point custom palettes declared in individual pages so no
     off-palette colour survives the retoken. ────────────────── */
  --stone:        var(--cb-muted);
  --silk-ivory:   var(--cb-ivory);
  --silk-onyx:    var(--cb-ink-deep);
  --silk-stone:   var(--cb-muted);
  --batumi:       var(--cb-success);
  --tbilisi:      var(--cb-info);

  /* ── Typography ─────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Inter Tight', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-arabic:   'IBM Plex Sans Arabic', sans-serif;
  /* legacy font aliases → v2.1 (prior display/sans faces retired) */
  --font-serif:    var(--font-display);
  --font-sans:     var(--font-body);
  --font-italic:   var(--font-display);

  /* ── Spacing scale (8px base) ───────────────────────── */
  --space-1:  8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px;  --space-6: 64px; --space-7: 96px; --space-8: 128px;

  /* ── Tier B — Documents / Print (reference only) ────── */
  --doc-bg:#FBFCFD; --doc-surface:#FFFFFF; --doc-ink:#1A2944;
  --doc-gold:#C9A84C; --doc-gold-deep:#8A6B3E; --doc-panel:#E8D6A8;
  --doc-muted:#4A5468; --doc-line:rgba(26,41,68,.12); --doc-success:#2D7A4F;
}

/* ============================================================
   GLOBAL RETOKEN OVERRIDES
   These rules load after base.css / components.css / inline
   <style> blocks, so equal-specificity selectors here win the
   cascade — pulling grounds, cards, buttons and type onto v2.1
   without editing every page. No layout/structure changes.
   ============================================================ */

/* Body: v2.1 body face + ink ground */
body {
  background: var(--cb-ink);
  color: var(--cb-ivory);
  font-family: var(--font-body);
}

/* Headings / display serif → Cormorant Garamond (never bold) */
h1, h2, h3, h4, h5, h6,
.section-title, .page-h1, .hero-h1, .footer-brand-name, .nav-logo, .stat-num {
  font-family: var(--font-display);
}

/* Figures / stats / codes → JetBrains Mono tabular */
.stat-num, .metric-value, .metric-num, .price, code, .mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}

/* ── Header / footer / deep grounds → ink-deep ──────────── */
nav {
  background: rgba(8, 9, 12, 0.94);
  border-bottom: 1px solid var(--cb-line-gold);
  box-shadow: none;
}
footer { background: var(--cb-ink-deep); border-top: 1px solid var(--cb-line-gold); }

/* ── Cards → surface ground, gold hairline, radius 12, no shadow ── */
.card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-gold);
  border-radius: 12px;
  box-shadow: none;
}
.card:hover {
  border-color: rgba(201, 169, 97, 0.45);
  background: var(--cb-surface-raised);
  box-shadow: none;
}
/* Retire the decorative gold shimmer gradient on cards (borders carry depth) */
.card::before { display: none; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-gold {
  background: var(--cb-gold);
  color: var(--cb-ink);
  border-radius: 10px;
}
.btn-gold:hover {
  background: var(--cb-gold-tint);
  transform: none;
  box-shadow: none;
}
.btn-outline {
  background: transparent;
  color: var(--cb-ivory);
  border: 1px solid var(--cb-line-gold);
  border-radius: 10px;
}
.btn-outline:hover {
  border-color: var(--cb-gold);
  color: var(--cb-gold);
  transform: none;
  box-shadow: none;
}
.nav-links .nav-cta, .nav-book-call {
  color: var(--cb-ink) !important;
  border-radius: 10px;
}
.nav-links .nav-cta:hover, .nav-book-call:hover { background: var(--cb-gold-tint); }

/* ── Eyebrows / small uppercase labels → full brand gold ── */
.section-label, .page-eyebrow, .hero-eyebrow {
  color: var(--cb-gold);
}
.section-label::before, .page-eyebrow::before,
.hero-eyebrow::before, .hero-eyebrow::after { background: var(--cb-gold); }

/* Big index numerals + stats → gold; values → ivory */
.stat-num { color: var(--cb-gold); }

/* ── Dividers / hairlines → neutral line unless gold-emphasis ── */
.g-rule {
  background: linear-gradient(90deg, var(--cb-gold-soft) 0%,
    rgba(201, 169, 97, 0.10) 50%, transparent 100%);
}

/* ── HERO — flat ink + subtle grid texture + one radial gold wash ── */
.hero {
  background: var(--cb-ink);
  background-image:
    linear-gradient(rgba(201, 169, 97, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.hero-overlay {
  background: linear-gradient(180deg,
    rgba(10, 11, 15, 0.30) 0%, rgba(10, 11, 15, 0.55) 50%, rgba(10, 11, 15, 0.88) 100%);
}
.hero-glow {
  background: radial-gradient(900px 380px at 84% -20%,
    rgba(201, 169, 97, 0.14), transparent 62%);
}

/* ── Arabic: IBM Plex Sans Arabic only, ls 0, lh 1.95 ───── */
[lang="ar"], [dir="rtl"], :lang(ar) {
  font-family: var(--font-arabic) !important;
  letter-spacing: 0 !important;
  line-height: 1.95;
  font-style: normal;
}
[lang="ar"] *, [dir="rtl"] * { font-family: var(--font-arabic); }
/* Display serif inside Arabic still uses Cormorant where authored */
[lang="ar"] [style*="Cormorant"],
[dir="rtl"] [style*="Cormorant"] { font-family: var(--font-display) !important; }