/* ==========================================================
   TygerLabs.ai · Tokens
   The only file with raw color values. Dark-only by decision
   (23 Sep 2026): the brand lives on near-black, and the logo
   is drawn for it.

   Palette built from the logo, not inherited:
     tiger     #FF6B1A → #FFB347  the logo's own gradient
     neutrals  zinc-leaning near-black, so orange is the only hue
   Contrast, measured (WCAG formula), on --bg / on --surface-1:
     --ink 18.2 / 16.6 · --ink-2 13.4 / 12.2 · --muted 7.7 / 7.0
     --dim 4.9 / 4.5 (floor: never put --dim on --surface-2 or up)
     --tiger 6.9 / 6.3 · --tiger-2 11.1 / 10.1
     --tiger-ink on --tiger 6.9 · on --tiger-2 11.1
   White on #FF6B1A is 2.8:1 and fails AA, so text on orange
   is near-black. That's also the louder look.
   ========================================================== */

:root,
[data-bs-theme="dark"] {
  /* Surfaces: page, then four steps up */
  --bg:        #0A0A0B;
  --surface-0: #101012;
  --surface-1: #16161A;
  --surface-2: #1D1D22;
  --surface-3: #26262C;
  --bg-glass:        rgba(10, 10, 11, 0.72);
  --bg-glass-strong: rgba(10, 10, 11, 0.9);

  /* Text ramp */
  --ink:   #F6F5F3;
  --ink-2: #D4D4D8;
  --muted: #A1A1AA;
  --dim:   #7E7E88;

  /* Lines */
  --line:   rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);

  /* Brand */
  --tiger:       #FF6B1A;
  --tiger-2:     #FFB347;
  --tiger-deep:  #E0550F;
  --tiger-ink:   #0A0A0B;
  --tiger-soft:  rgba(255, 107, 26, 0.10);
  --tiger-rim:   rgba(255, 107, 26, 0.32);
  --tiger-glow:  rgba(255, 107, 26, 0.22);
  --tiger-gradient: linear-gradient(135deg, #FF6B1A 0%, #FFB347 100%);
  --fade-in-right: linear-gradient(90deg, transparent 0%, #000 45%);
  --fade-down: linear-gradient(180deg, #000 30%, transparent 100%);
  --tiger-gradient-text: linear-gradient(100deg, #FF6B1A 0%, #FF8A3D 45%, #FFB347 100%);

  /* Semantic, three tones each: base, text-on-soft, soft fill */
  --success:      #4ADE80;
  --success-ink:  #BBF7D0;
  --success-soft: rgba(74, 222, 128, 0.12);
  --info:         #7DD3FC;
  --info-ink:     #E0F2FE;
  --info-soft:    rgba(125, 211, 252, 0.12);
  --warn:         #FBBF24;
  --warn-ink:     #FEF3C7;
  --warn-soft:    rgba(251, 191, 36, 0.12);
  --danger:       #F87171;
  --danger-ink:   #FEE2E2;
  --danger-soft:  rgba(248, 113, 113, 0.12);

  /* Type */
  --ff-display: 'Outfit', system-ui, sans-serif;
  --ff-body:    'Hanken Grotesk', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.9375rem;
  --text-sm:   1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --text-2xl:  clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --text-3xl:  clamp(2.75rem, 1.9rem + 3.8vw, 5.25rem);
  --text-hero: clamp(3rem, 1.4rem + 7.4vw, 8.5rem);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-ultra:   900;

  /* Spacing, 4px grid */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 4vw, 6.5rem);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadow, brand-tinted */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-tiger: 0 12px 40px rgba(255, 107, 26, 0.28);
  /* Logo depth: a cast shadow for lift, an orange halo for heat */
  --logo-depth: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 107, 26, 0.28));
  --logo-depth-hover: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 24px rgba(255, 107, 26, 0.5));
  --logo-depth-flare: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(255, 107, 26, 0.7));
  --scratch-faint: rgba(255, 255, 255, 0.05);
  --logo-sheen: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.6) 50%, transparent 58%);

  /* Motion */
  --t-fast: 150ms;
  --t-mid:  250ms;
  --t-slow: 400ms;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-index */
  --z-sticky: 50;
  --z-drawer: 100;
  --z-modal:  200;
  --z-toast:  300;

  /* Layout */
  --header-h: 104px;

  /* ---- Bootstrap mapping ----
     Bootstrap reads these, so its components wear the brand
     without any override selectors. */
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 10, 10, 11;
  --bs-body-color: var(--ink-2);
  --bs-body-color-rgb: 212, 212, 216;
  --bs-body-font-family: var(--ff-body);
  --bs-body-font-size: 1.25rem;
  --bs-body-line-height: 1.65;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 246, 245, 243;
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--surface-1);
  --bs-tertiary-bg: var(--surface-0);
  --bs-heading-color: var(--ink);
  --bs-primary: var(--tiger);
  --bs-primary-rgb: 255, 107, 26;
  --bs-primary-text-emphasis: var(--tiger-2);
  --bs-primary-bg-subtle: var(--tiger-soft);
  --bs-primary-border-subtle: var(--tiger-rim);
  --bs-link-color: var(--tiger-2);
  --bs-link-color-rgb: 255, 179, 71;
  --bs-link-hover-color: var(--ink);
  --bs-link-hover-color-rgb: 246, 245, 243;
  --bs-border-color: var(--line-2);
  --bs-border-color-translucent: var(--line);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-lg);
  --bs-focus-ring-color: rgba(255, 107, 26, 0.45);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
  --bs-code-color: var(--tiger-2);
}

/* Phones: a shorter header leaves more of the first screen for content. */
@media (max-width: 575.98px) {
  :root { --header-h: 80px; }
}