/* UltraFuel homepage — design tokens + base, from the UltraFuel design system
   (colors_and_type.css). The section markup carries the design's own inline
   styles verbatim; this file supplies the tokens they reference plus base,
   motion, and the few interactive (hover/focus) states the prototype expressed
   as style-hover/style-active attributes. */

:root {
  /* Neutrals */
  --paper: #FAF8F3;
  --surface: #FFFFFF;
  --surface-2: #F2EFE7;
  --ink: #0F1419;
  --ink-2: #2A2F36;
  --ink-3: #5C6068;
  --ink-4: #8B8F94;
  --line: #E6E2D8;
  --line-2: #D4CFC2;

  /* Brand — signal orange */
  --signal: #FF4A1C;
  --signal-700: #D63810;
  --signal-300: #FFA98C;
  --signal-100: #FFE5DA;
  --signal-50: #FFF2EC;

  /* Fluid — hydration blue */
  --fluid: #2B7FFF;
  --fluid-700: #1C5FCC;
  --fluid-300: #8FB8FF;
  --fluid-100: #DCE9FF;

  /* Energy — carbs amber */
  --energy: #F2A007;
  --energy-700: #C47D00;
  --energy-300: #F8CF73;
  --energy-100: #FDEACB;

  /* Mineral — sodium sage */
  --mineral: #5C8A6A;
  --mineral-700: #3F6B4C;

  /* Semantic */
  --success: #1F8B5A;
  --warning: #E8A317;
  --danger: #C8331F;

  /* Race-day dark */
  --night: #0B0D11;
  --night-2: #14181F;
  --night-3: #1F252E;
  --night-line: #2A323D;

  /* Type families */
  --font-display: 'Space Grotesk', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(15, 20, 25, 0.04), 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-2: 0 1px 2px rgba(15, 20, 25, 0.04), 0 4px 12px rgba(15, 20, 25, 0.06);
  --shadow-3: 0 4px 8px rgba(15, 20, 25, 0.06), 0 16px 32px rgba(15, 20, 25, 0.08);
  --shadow-signal: 0 6px 24px rgba(255, 74, 28, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--signal-700); text-decoration: none; }
a:hover { color: var(--signal); }

::selection { background: var(--signal-100); color: var(--ink); }

@keyframes uf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Reveal-on-scroll: elements start hidden (inline) and are revealed by home.js.
   With JS off, the <noscript> block in the page forces them visible; reduced
   motion shows everything immediately. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Interactive states the prototype expressed via style-hover/-active/-focus.
   The base background/border is set here (not inline) so the hover/focus rule
   can win — inline styles would otherwise override a pseudo-class rule. */
.uf-cta { background: var(--signal); color: #fff; }
.uf-cta:hover { background: var(--signal-700); color: #fff; }
.uf-cta:active { transform: scale(0.98); }

.uf-field { border: 1px solid var(--night-line); }
.uf-field:focus { border-color: var(--signal); }

/* Responsive header: the section-anchor links don't fit on small screens
   (they're same-page anchors, so dropping them loses nothing). The inline
   styles on the links set color/size only; display is controlled here. */
@media (max-width: 760px) {
  .uf-nav-anchor { display: none; }
}
@media (max-width: 420px) {
  .uf-nav-cta { padding: 9px 14px !important; font-size: 13px !important; }
}