/* ==========================================================================
   BAZO DESIGN TOKENS v1.0 — 2026-10-23
   --------------------------------------------------------------------------
   Design artwork extracted (measurements only — no copied code) from the
   Leonxlnx/taste-skill design library (MIT), a public collection of design
   tokens distilled from measured studies of real high-end sites.
   Provenance: palettes, type classes, motion recipes, hero/section blueprints
   and direction archetypes from that library, re-mapped to Bazo's ventures.
   Nothing here executes, phones home, or loads third-party code: fonts fall
   back to system stacks; the Fontshare <link> lines are OPTIONAL enhancements
   (free CDN, official source) — delete them and the system falls back cleanly.
   ========================================================================== */

:root {
  /* ---- shared scale (all brands) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;
  --radius-sharp: 2px; --radius-card: 6px; --radius-pill: 999px;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --type-display: clamp(40px, 6vw, 96px);
  --type-h2: clamp(28px, 3.4vw, 48px);
  --type-body: 17px;
  --leading-tight: 1.05; --leading-body: 1.55;
}

/* ==========================================================================
   1. TOP SHELF PICKED — "Newsprint and brass"
   Affiliate guides. Trust is the product: editorial, quiet, one brass detail
   per screen. Library: palette paper-grey-brass · direction specimen-catalogue
   (products as specimens) · motion stillness.
   ========================================================================== */
[data-brand="topshelfpicked"] {
  --bg: #e8e8e3;        /* warm paper grey */
  --surface: #dcdcd6;   /* tiles, inputs */
  --ink: #181715;       /* near-black type */
  --muted: #63625c;     /* secondary lines */
  --accent: #bfb21a;    /* brass — ONE detail per screen: the button or the pick badge */
  --accent-ink: #181715;
  --font-display: "Switzer", var(--font-system);   /* grotesk-tight, 600, -0.04em */
  --font-body: "Switzer", var(--font-system);
  --display-weight: 600; --display-tracking: -0.04em;
  --dark-section-bg: #181715; --dark-section-ink: #e8e8e3; /* whole sections flip */
}
/* OPTIONAL font enhancement (Fontshare, free, official CDN — a <link> line may be
   added in the HTML head; deleting it leaves the system-stack fallback clean): */

/* ==========================================================================
   2. GLOBAL CIRCLE ADVISORY — "Warm black, gold"
   Bilingual EN→FR, international business positioning. Institutional, warm,
   premium. The NAME is the monument (brand visibly present — his rule).
   Library: palette warm-black-gold · direction name-as-monument + editorial-report
   · hero name-under-photograph · motion masked-headline.
   ========================================================================== */
[data-brand="gca"] {
  --bg: #0c0a08;        /* warm near-black */
  --surface: #181512;   /* brown-black panels */
  --ink: #ffffff;
  --muted: #8f8a84;
  --accent: #c9a45a;    /* gold — one link or small button per screen, never a field */
  --accent-ink: #0c0a08;
  --font-display: "Switzer", var(--font-system);
  --font-body: "Switzer", var(--font-system);
  --display-weight: 600; --display-tracking: -0.04em;
  --hero-name-size: clamp(120px, 19vw, 300px); /* the name IS the architecture */
}
/* Hero motion: masked-headline — each line rises from its baseline, 900ms
   var(--ease-out-strong), second line 110ms after the first. Nothing else moves. */

/* ==========================================================================
   3. GAMMAOPS — "Night and cornflower"
   Trading dashboard. Dark, dense, exact. No showpiece — discipline is the
   statement. Library: palette blue-black-cornflower · direction quiet-instrument
   · motion stillness (140ms button press, 180ms link colour, instant focus).
   ========================================================================== */
[data-brand="gammaops"] {
  --bg: #0a0d14;        /* blue-black ground */
  --surface: #131824;   /* slate panels */
  --ink: #e9edf3;
  --muted: #8891a1;
  --accent: #5a9bfc;    /* cornflower — buttons + at most one word in a heading */
  --accent-ink: #0a0d14;
  --font-display: "Switzer", var(--font-system);
  --font-body: "Switzer", var(--font-system);
  --display-weight: 600; --display-tracking: -0.03em;
  --up: #3ddc84; --down: #ff5a5a; /* data semantics sit outside the brand palette */
}

/* ==========================================================================
   4. SANKOFA POST — "Cobalt on sand"
   Parcel forwarding, USA → West Africa corridor, EN+FR, diaspora trust.
   Warm sand paper, ONE cobalt does everything — text, shapes, button.
   Library: palette cobalt-on-sand · direction place-carries-it (the corridor
   carries the brand) · hero name-under-photograph · motion slow-crossfade
   (corridor photographs shifting like light, 1.6s crossfade, 5–6s holds).
   ========================================================================== */
[data-brand="sankofa"] {
  --bg: #e6dbc7;        /* sand paper */
  --surface: #ddd0b9;
  --ink: #062b8a;       /* cobalt — text, drawings, shapes, ALL one blue */
  --muted: #3a5aa8;
  --accent: #062b8a;    /* cobalt block button, sand type */
  --accent-ink: #e6dbc7;
  --font-display: "Switzer", var(--font-system);
  --font-body: "Switzer", var(--font-system);
  --display-weight: 600; --display-tracking: -0.04em;
}

/* ---- shared motion recipes (from the library, rewritten as plain CSS) ---- */
.motion-masked-line { overflow: hidden; }
.motion-masked-line > span {
  display: block;
  animation: masked-rise 900ms var(--ease-out-strong) both;
}
.motion-masked-line > span + span { animation-delay: 110ms; }
@keyframes masked-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
.motion-stillness a { transition: color 180ms ease; }
.motion-stillness button { transition: transform 140ms ease, background-color 180ms ease; }
.motion-stillness button:active { transform: scale(0.97); }
.motion-crossfade img { animation: crossfade 1.6s ease-in-out; }
@keyframes crossfade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .motion-masked-line > span, .motion-crossfade img { animation: none; }
  .motion-stillness a, .motion-stillness button { transition: none; }
}