/* @ds-adherence-ignore -- deployment build artifact; not part of the design system */
/* ============================================================
   FITFUNNEL — Colors & Type
   "Chrome & Volt" — dark-first, technical, edgy
   ============================================================ */

/* ---------- Fonts ----------
   @font-face rules are declared inline in each page's <head> <style> block
   (index.html / case-vmi.html) so this deploy bundle stays self-contained without
   a second global @font-face declaration. Font files live in ./fonts/. */

:root {
  /* ============ CORE PALETTE — Chrome & Volt ============ */
  --void:        #09090B;  /* near-black, primary surface          */
  --chrome:      #C6C6CC;  /* silver-chrome, primary neutral text  */
  --volt:        #2D7EFF;  /* electric blue, the one accent        */
  --white:       #FFFFFF;

  /* ============ SURFACES (dark-first ramp) ============ */
  --bg-0:        #09090B;  /* page                                 */
  --bg-1:        #0E0E11;  /* raised panel                         */
  --bg-2:        #15151A;  /* card                                 */
  --bg-3:        #1D1D23;  /* hover / inset                        */
  --bg-elevated: #232329;  /* menus, popovers                      */

  /* ============ CHROME RAMP (neutral text/strokes) ============ */
  --fg-1:        #F4F4F6;  /* primary text on dark                 */
  --fg-2:        #C6C6CC;  /* secondary text (chrome)              */
  --fg-3:        #8A8A93;  /* tertiary / captions                  */
  --fg-4:        #5A5A63;  /* disabled / faint                     */

  /* ============ LINES & STROKES ============ */
  --line-1:      rgba(198,198,204,0.10);  /* hairline divider      */
  --line-2:      rgba(198,198,204,0.18);  /* card border           */
  --line-3:      rgba(198,198,204,0.32);  /* emphasized border     */
  --bracket:     rgba(198,198,204,0.55);  /* bracket-frame strokes */

  /* ============ VOLT (accent) ============ */
  --volt:        #2D7EFF;
  --volt-hover:  #4B91FF;
  --volt-press:  #1E6AE6;
  --volt-soft:   rgba(45,126,255,0.14);   /* tinted fill           */
  --volt-line:   rgba(45,126,255,0.40);   /* tinted border         */
  --volt-glow:   rgba(45,126,255,0.45);   /* shadow/glow           */

  /* ============ SEMANTIC ============ */
  --gain:        #34D17F;  /* revenue up / positive                */
  --gain-soft:   rgba(52,209,127,0.14);
  --warn:        #F5B544;
  --loss:        #F5564A;  /* the "5%" / stagnation                */
  --loss-soft:   rgba(245,86,74,0.14);

  /* ============ CHROME GRADIENT (metallic surfaces) ============ */
  --chrome-grad: linear-gradient(180deg, #FFFFFF 0%, #D7D7DD 18%, #9A9AA2 50%, #E6E6EB 70%, #76767D 100%); /* @kind color */
  --chrome-grad-text: linear-gradient(180deg, #FFFFFF 0%, #C6C6CC 45%, #76767D 78%, #E6E6EB 100%);
  /* Softer chrome for interactive surfaces (buttons) — gentle silver, low contrast */
  --chrome-grad-soft: linear-gradient(180deg, #F3F3F5 0%, #E2E2E6 52%, #CFCFD5 100%); /* @kind color */

  /* ============ TYPE FAMILIES ============ */
  --font-wide:    "Roc Grotesk Wide", "Space Grotesk", sans-serif;  /* extra-wide hero/display */
  --font-display: "Space Grotesk", "SF Mono", ui-monospace, sans-serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, "SF Mono", monospace;

  /* ============ TYPE SCALE (px) ============ */
  --t-display:   clamp(52px, 7vw, 104px); /* @kind font */
  --t-h1:        clamp(40px, 5vw, 68px); /* @kind font */
  --t-h2:        clamp(30px, 3.4vw, 44px); /* @kind font */
  --t-h3:        24px;
  --t-h4:        19px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-small:     14px;
  --t-micro:     12px;
  --t-mono-tag:  13px;

  /* ============ RADII ============ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ============ SPACING (4px base) ============ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ============ SHADOWS / ELEVATION ============ */
  --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.6);
  --shadow-volt: 0 8px 28px rgba(45,126,255,0.35);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */
.ff-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.ff-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.ff-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.ff-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ff-h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ff-body-lg {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
}
.ff-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
}
.ff-small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg-3);
}
/* Monospace tag — the technical signature: UPPERCASE, tracked-out */
.ff-tag {
  font-family: var(--font-mono);
  font-size: var(--t-mono-tag);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ff-tag-volt { color: var(--volt); }

/* Extra-wide display — short statements & big numbers, ALL CAPS friendly */
.ff-wide {
  font-family: var(--font-wide);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.98;
  color: var(--fg-1);
  text-transform: uppercase;
}

/* Chrome metallic text treatment (use sparingly, big sizes only) */
.ff-chrome-text {
  background: var(--chrome-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
