/* BoldBrandz Design System — Colors & Type
 * ─────────────────────────────────────────
 * Dark luxury aesthetic. RTL-first. Numbers before adjectives.
 * Doctrine: Digital Sovereignty — Impact over Impression.
 */

/* ── Typography imports ────────────────────────────────────── */

/* Primary Latin: Clash Grotesk (licensed, self-hosted). */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Extralight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: block;
}

/* Arabic primary: Alexandria (self-hosted, no Google Fonts dependency) */
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-Thin.ttf') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria/Alexandria-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Hebrew secondary: Heebo — same geometric grotesque rhythm as the Latin */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');

/* Mono — data-dense Linear/Raycast reference */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ────────────────────────────────────────────────── */

:root {
  /* ── Brand primitives (from Colors pdf) ─────────────────── */
  --bb-blue:        #0047ff;   /* Main color  — electric ultramarine */
  --bb-black:       #000000;   /* Secondary color */
  --bb-white:       #ffffff;   /* Main color (inverted) */

  /* Blue scale — derived harmonically from #0047ff */
  --bb-blue-50:    #eaf0ff;
  --bb-blue-100:   #cedcff;
  --bb-blue-200:   #9fb8ff;
  --bb-blue-300:   #6e92ff;
  --bb-blue-400:   #386bff;
  --bb-blue-500:   #0047ff;    /* = --bb-blue */
  --bb-blue-600:   #003adb;
  --bb-blue-700:   #002eb0;
  --bb-blue-800:   #002286;
  --bb-blue-900:   #001a66;
  --bb-blue-950:   #000f3d;

  /* Zinc scale — dark luxury base (Linear/Vercel reference) */
  --bb-zinc-50:    #fafafa;
  --bb-zinc-100:   #f4f4f5;
  --bb-zinc-200:   #e4e4e7;
  --bb-zinc-300:   #d4d4d8;
  --bb-zinc-400:   #a1a1aa;
  --bb-zinc-500:   #71717a;
  --bb-zinc-600:   #52525b;
  --bb-zinc-700:   #3f3f46;
  --bb-zinc-800:   #27272a;
  --bb-zinc-900:   #18181b;
  --bb-zinc-950:   #09090b;    /* default surface */

  /* Semantic — result-reporting (data storytelling) */
  --bb-win:        #22c55e;    /* metrics moving the right way */
  --bb-loss:       #ef4444;    /* before-state, losses */
  --bb-warn:       #f59e0b;
  --bb-info:       var(--bb-blue-500);

  /* ── Semantic surfaces (dark mode = default) ─────────────── */
  --bg-0:          var(--bb-zinc-950);     /* page */
  --bg-1:          #0f0f11;                /* raised surface */
  --bg-2:          var(--bb-zinc-900);     /* card */
  --bg-3:          var(--bb-zinc-800);     /* popover / hover */
  --bg-inverse:    var(--bb-white);
  --bg-accent:     var(--bb-blue-500);
  --bg-accent-sub: rgba(0, 71, 255, 0.10); /* tinted surface */

  /* Foreground */
  --fg-1:          var(--bb-white);        /* primary text */
  --fg-2:          var(--bb-zinc-300);     /* body */
  --fg-3:          var(--bb-zinc-400);     /* secondary / captions */
  --fg-4:          var(--bb-zinc-500);     /* tertiary / disabled */
  --fg-accent:     var(--bb-blue-400);     /* links on dark */
  --fg-on-accent:  var(--bb-white);
  --fg-inverse:    var(--bb-zinc-950);

  /* Borders — very subtle, precise */
  --border-1:      rgba(255, 255, 255, 0.06);  /* hairline */
  --border-2:      rgba(255, 255, 255, 0.10);  /* default */
  --border-3:      rgba(255, 255, 255, 0.16);  /* strong / focus */
  --border-accent: var(--bb-blue-500);

  /* ── Fonts ───────────────────────────────────────────────── */
  --font-display:  'Clash Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Clash Grotesk', 'Inter', system-ui, sans-serif;
  --font-arabic:   'Alexandria', 'Tajawal', 'Cairo', system-ui, sans-serif;
  --font-hebrew:   'Heebo',   'Clash Grotesk', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale — tight Linear/Vercel rhythm ────────────── */
  --text-xs:       11px;
  --text-sm:       13px;
  --text-base:     15px;
  --text-md:       17px;
  --text-lg:       20px;
  --text-xl:       24px;
  --text-2xl:      32px;
  --text-3xl:      44px;
  --text-4xl:      60px;
  --text-5xl:      80px;
  --text-6xl:      104px;

  /* Leading / tracking */
  --leading-tight:  1.05;
  --leading-snug:   1.20;
  --leading-normal: 1.45;
  --leading-loose:  1.60;

  --tracking-tight:   -0.03em;   /* display */
  --tracking-snug:    -0.015em;  /* headings */
  --tracking-normal:  -0.005em;  /* body */
  --tracking-eyebrow: 0.14em;    /* uppercase eyebrows */

  /* ── Spacing — 4px base ─────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radii — restrained (Linear-esque) ──────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ── Elevation (subtle — dark mode rules) ───────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.45);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 48px rgba(0,0,0,0.55);
  --shadow-accent: 0 0 0 1px rgba(0,71,255,0.35), 0 12px 32px rgba(0,71,255,0.28);
  --glow-accent:   0 0 48px rgba(0, 71, 255, 0.35);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* comprehension-first */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;
  --dur-count:   1400ms;   /* metric counters */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* ── Theme-aware component tokens (dark defaults) ────────── */
  --bg-base:     #09090b;
  --bg-card:     #18181b;
  --bg-elevated: #0f0f12;
  --border-subtle: #27272a;
  --border-strong: #3f3f46;
  --text-primary:   #f4f4f5;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-dim:       #71717a;
  --text-faint:     #52525b;
  --accent-primary: #0047ff;
  --accent-primary-glow: rgba(0, 71, 255, 0.35);
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.12);
  --danger: #f87171;
  --danger-glow: rgba(248, 113, 113, 0.12);
}

/* Dark theme — explicit (mirrors :root defaults for specificity) */
[data-theme="dark"] {
  --bg-base:     #09090b;
  --bg-card:     #18181b;
  --bg-elevated: #0f0f12;
  --border-subtle: #27272a;
  --border-strong: #3f3f46;
  --text-primary:   #f4f4f5;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-dim:       #71717a;
  --text-faint:     #52525b;
  --accent-primary: #0047ff;
  --accent-primary-glow: rgba(0, 71, 255, 0.35);
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.12);
  --danger: #f87171;
  --danger-glow: rgba(248, 113, 113, 0.12);
  /* Legacy vars — kept for backward compat */
  --bg-0: #09090b; --bg-1: #0f0f11; --bg-2: #18181b; --bg-3: #27272a;
  --fg-1: #f4f4f5; --fg-2: #d4d4d8; --fg-3: #a1a1aa; --fg-4: #71717a;
  --border-1: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.10); --border-3: rgba(255,255,255,0.16);
}

/* Light theme — high-contrast, accessible */
[data-theme="light"] {
  --bg-base:     #ffffff;
  --bg-card:     #fafafa;
  --bg-elevated: #f4f4f5;
  --border-subtle: #e4e4e7;
  --border-strong: #d4d4d8;
  --text-primary:   #18181b;
  --text-secondary: #27272a;
  --text-muted:     #52525b;
  --text-dim:       #71717a;
  --text-faint:     #a1a1aa;
  --accent-primary: #0047ff;
  --accent-primary-glow: rgba(0, 71, 255, 0.18);
  --success: #16a34a;
  --success-glow: rgba(22, 163, 74, 0.10);
  --danger: #dc2626;
  --danger-glow: rgba(220, 38, 38, 0.08);
  /* Legacy vars */
  --bg-0: #fafafa; --bg-1: #ffffff; --bg-2: #f4f4f5; --bg-3: #e4e4e7;
  --bg-accent-sub: rgba(0, 71, 255, 0.08);
  --fg-1: #09090b; --fg-2: #27272a; --fg-3: #52525b; --fg-4: #71717a;
  --fg-accent: var(--bb-blue-600);
  --border-1: rgba(0,0,0,0.06); --border-2: rgba(0,0,0,0.10); --border-3: rgba(0,0,0,0.18);
}

/* ── Base elements ─────────────────────────────────────────── */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";   /* alternate glyphs where supported */
}

/* RTL is first-class */
[dir="rtl"] { font-family: var(--font-arabic); }
[lang^="he"]                { font-family: var(--font-hebrew); }
[lang^="ar"], [dir="rtl"]   { font-family: var(--font-arabic); }

/* Display — hero, section headers */
.bb-display, .bb-h0 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}

/* Heading scale */
h1, .bb-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}
h2, .bb-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
}
h3, .bb-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
h4, .bb-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}

/* Body */
p, .bb-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}
.bb-body-lg { font-size: var(--text-md); line-height: 1.55; }
.bb-body-sm { font-size: var(--text-sm); line-height: 1.5; color: var(--fg-3); }

/* Eyebrow — small uppercase label over sections */
.bb-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Metric — the number, before the adjective */
.bb-metric {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.bb-metric-sm { font-size: var(--text-3xl); letter-spacing: -0.03em; }

/* Mono — data, code, keyboard cues */
code, kbd, samp, .bb-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss02", "cv01";
}

/* Links */
a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--fg-accent); border-color: var(--border-accent); }

/* Selection */
::selection { background: var(--bb-blue-500); color: var(--bb-white); }

/* Focus ring — precise, accessible */
:focus-visible {
  outline: 2px solid var(--bb-blue-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Theme transition — only active during toggle ──────────── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}