/* ==========================================================================
   ASTATINEWEBPRO · MASTER DESIGN SYSTEM TOKENS
   Strict standards: No pure #FFF, no pure #000, organic pigments, heavy easing
   ========================================================================== */

:root {
  /* --- PALETTE 1: KILN & ARCHITECTURAL PAPER (C2 / Craft / Luxury) --- */
  --bg-paper:      #F4F0E8; /* warm parchment instead of harsh white */
  --bg-bone:       #ECE6DB; /* secondary light surface */
  --bg-dust:       #D6CAB7; /* card borders / dividers */
  --color-kiln:    #141210; /* kiln charcoal instead of dead #000 */
  --color-kiln-2:  #1D1A17; /* elevated dark surface */
  --color-clay:    #B4532F; /* natural terracotta accent */
  --color-clay-hi: #C9663E; /* interactive hover */
  --color-glaze:   #1E473B; /* deep scandinavian forest glaze */

  /* --- PALETTE 2: CHARCOAL & EMBER (Gastro / Steaks / Smash Burgers) --- */
  --bg-charcoal:   #0B0908; /* smoked grill background */
  --color-ember:   #FF5500; /* flame orange */
  --color-gold:    #FFB800; /* warm butter gold */
  --color-receipt: #FAF8F5; /* crisp white thermal receipt */
  --color-smoke:   #1F1A17; /* card container */

  /* --- PALETTE 3: BASALT & BLOOMBERG (B2B / Finance / Marketing / Law) --- */
  --bg-basalt:     #09090A; /* dark graphite */
  --color-surface: #121214; /* secondary dark card */
  --color-metric:  #FFC72C; /* revenue gold/amber indicator */
  --color-chalk:   #F0EDE6; /* text primary */
  --color-dim:     #827E76; /* text muted */

  /* --- TYPOGRAPHY FAMILIES --- */
  --font-serif:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans:     "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:     "IBM Plex Mono", "Geist Mono", monospace;

  /* --- FLUID TYPOGRAPHY SCALES (Never use fixed px for headlines) --- */
  --h1: 700 clamp(42px, 7vw, 112px)/0.94 var(--font-serif);
  --h2: 600 clamp(34px, 5.2vw, 84px)/0.98 var(--font-serif);
  --h3: 600 clamp(24px, 3.2vw, 48px)/1.08 var(--font-serif);
  --body: 400 clamp(16px, 1.15vw, 19px)/1.55 var(--font-sans);
  --mono-badge: 500 11px/1.2 var(--font-mono);

  /* --- LETTER SPACING (Tracking) --- */
  --track-tight:   -0.025em; /* always use on large titles */
  --track-normal:  -0.01em;
  --track-mono:     0.08em;  /* always use on uppercase mono badges */

  /* --- MASTER INERTIAL EASINGS (Never use linear or standard ease) --- */
  --ease-heavy: cubic-bezier(.16, 1, .3, 1);  /* 2BRO signature heavy stop */
  --ease-out:   cubic-bezier(.22, 1, .36, 1); /* fast punch, smooth glide */
  --ease-io:    cubic-bezier(.77, 0, .18, 1); /* dramatic curtain wipe */

  /* --- SYSTEM LAYOUT SPACING --- */
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --nav-h: 72px;
}

/* Master Word-Split Animations */
.w-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.04em 0.08em;
  margin: -0.12em -0.04em -0.08em;
}
.w-inner {
  display: inline-block;
  will-change: transform;
  transform: translateY(115%);
  transition: transform 0.85s var(--ease-heavy);
}
.w-inner.is-revealed {
  transform: translateY(0);
}