/* ==========================================================================
   TrainOn design tokens
   Every color, spacing step and motion value the site uses lives here.
   Colors come from TrainOn's Figma design system (TrainOn Product DS).
   ========================================================================== */

:root {
  /* ---- Color ---------------------------------------------------------- */
  --color-bg: #10101d; /* Primary / Black (Night) */
  --color-surface: #171724; /* raised panel */
  --color-line: rgba(255, 255, 255, 0.15); /* Line / White 15 */
  --color-line-strong: rgba(255, 255, 255, 0.3); /* Line / White 30 */
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.75); /* Text / White 75 */
  --color-text-subtle: rgba(255, 255, 255, 0.5); /* Text / White 50 */
  --color-accent: #19c4cf; /* Cerulean Blue 01 */
  --color-accent-tint: rgba(25, 196, 207, 0.2);
  --color-error: #fe6f89;

  /* RGB triplets for rgb(var(--x) / alpha) washes */
  --accent-rgb: 25 196 207; /* Cerulean */
  --night-rgb: 16 16 29; /* Night */
  --power-rgb: 31 181 194; /* the power O's glow, #1fb5c2 as in the logo artwork */

  /* ---- Layout --------------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 48px); /* page side padding */

  /* ---- Spacing: the three rules -------------------------------------- */
  /* 1. Between sections */
  --space-section: clamp(72px, 9vw, 128px);
  /* 2. Section heading to its content (h2 to sub line is --space-sub) */
  --space-heading: clamp(40px, 5vw, 64px);
  --space-sub: var(--sp-20);
  /* 3. Inside components */
  --space-grid: var(--sp-24); /* gap between cards */
  --space-card: var(--sp-32); /* card padding (--sp-24 on phones) */
  --space-label: var(--sp-6); /* label to body text */

  /* ---- Spacing scale --------------------------------------------------
     Component padding, margins and gaps draw from these primitives so the
     fine spacing stays on one rhythm. (Hairline 1-5px nudges and one-off
     component dimensions are left as literal px on purpose.) */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;

  /* ---- Motion --------------------------------------------------------- */
  --dur-fast: 0.2s; /* hovers, small state changes */
  --dur-base: 0.45s; /* panel swaps, crossfades */
  --dur-slow: 0.7s; /* large moves, chart draws */
  --dur-scene: 1.2s; /* scene changes: hero zoom */
  /* the hero copy shows by itself at this point if its entrance never started (site.js reads it) */
  --hero-failsafe: 2.8s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* things arriving */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* things moving across */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* things leaving */

  /* Scroll reveals: text and cards float up into place */
  --reveal-dur: 1.1s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentler than --ease-out, so the float stays visible */
  --reveal-shift: 32px; /* starting offset below the final position */
  --reveal-stagger: 0.09s; /* delay between items that enter together */
}

@media (max-width: 640px) {
  :root {
    --space-card: var(--sp-24);
  }
}

/* ---- TrainOn component values (from TrainOn's Figma design system) -------- */
:root {
  /* Figma colors */
  --fg-cerulean: #19c4cf; /* Cerulean (same as --color-accent) */
  --btn-hover: #168e9a; /* TrainOn button Hover: Cerulean at 70% on Night, as one solid color so it fades smoothly */
  --btn-hover-night: #26263a; /* hover for the Night button on a teal band */
  --fg-black: #10101d; /* Night / ink on tinted buttons (same as --color-bg) */
  --fg-card-top: #525264; /* 2px top border on testimonial / stat cards */

  /* Button_M (40px) */
  --btn-h: 40px;
  --btn-pad: 12px 48px;
  --btn-radius: 36px;
  --btn-fs: 16px; /* Button_01 label */
  /* Button_XS (28px nav CTA) */
  --btn-xs-h: 28px;
  --btn-xs-pad: 2px 28px;
  --btn-xs-radius: 14px;
  /* Chips_status */
  --chip-radius: 12px;

  /* Web text styles */
  --fs-h1: clamp(34px, 3.4vw, 48px); /* Web-H1 */
  --fs-h2: clamp(30px, 3.4vw, 48px); /* Web-H3 section head */
  --fs-body-1: clamp(17px, 1.4vw, 20px); /* Web-Body-1 lede */
  --fs-body-2: 18px; /* Web-Body-2 list titles, quotes */
  --fs-body-3: 16px; /* Web-Body-3 supporting */
}

/* Very narrow phones (under 360px): tighter button sides so the longest label still fits */
@media (max-width: 359px) {
  :root {
    --btn-pad: var(--sp-12) var(--sp-24);
  }
}