/* =============================================================
   Velocity Brew — design tokens
   Import once at the root of any prototype/screen.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&display=swap");

:root {
  /* ----- Color: surfaces ----- */
  --bg-0: #050505;   /* canvas — true black */
  --bg-1: #0E0E0F;   /* primary card surface */
  --bg-2: #18181B;   /* elevated surface / sheets / menus */
  --bg-3: #232327;   /* highest elevation / hover surface */
  --line:  #2A2A2E;  /* hairline rules / 1px borders */
  --line-strong: #3A3A40;

  /* ----- Color: foreground ----- */
  --fg-1: #FAFAF7;   /* primary text (warm white) */
  --fg-2: #A4A4A8;   /* secondary text */
  --fg-3: #6B6B6E;   /* tertiary, disabled */
  --fg-on-crema: #1A0F00; /* text on accent fills */

  /* ----- Color: brand & semantic ----- */
  --crema: #FF9F1C;
  --crema-soft: #FFB347;
  --crema-deep: #C97A0E;
  --crema-glow: rgba(255, 159, 28, 0.35);
  --ignition: #FF4D2E;  /* destructive / alert */
  --jade: #00C896;      /* available / success */

  /* ----- Type: families ----- */
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-ui: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* ----- Type: scale (1.25 ratio) ----- */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-md:   15px;   /* body */
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;
  --t-4xl:  48px;
  --t-5xl:  64px;
  --t-6xl:  84px;

  /* ----- Spacing (4px base) ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;
  --s-9:  64px;

  /* ----- Radii ----- */
  --r-chip:    8px;
  --r-button: 10px;
  --r-input:  10px;
  --r-card:   14px;
  --r-sheet:  24px;
  --r-pill:   999px;

  /* ----- Elevation (sparingly!) ----- */
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 32px var(--crema-glow);

  /* ----- Motion ----- */
  --ease-precision: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
}

/* =============================================================
   Semantic styles
   ============================================================= */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1.4;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: var(--t-4xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: var(--t-3xl);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 85, "opsz" 48;
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.45;
}

.caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.data {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss01";
  font-weight: 500;
}

.price {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* =============================================================
   Utility primitives used across the kit
   ============================================================= */

.hairline {
  border: 1px solid var(--line);
}

.surface-1 { background: var(--bg-1); }
.surface-2 { background: var(--bg-2); }

.card {
  background: var(--bg-1);
  border-radius: var(--r-card);
  padding: var(--s-5);
}

.card-hairline {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-5);
}

.btn-primary {
  background: var(--crema);
  color: var(--fg-on-crema);
  font-weight: 600;
  font-size: var(--t-md);
  padding: 14px 22px;
  border-radius: var(--r-button);
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-precision),
              opacity var(--dur) var(--ease-precision);
}
.btn-primary:hover { opacity: 0.92; }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--line);
  font-weight: 500;
  font-size: var(--t-md);
  padding: 13px 22px;
  border-radius: var(--r-button);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-precision),
              background var(--dur) var(--ease-precision);
}
.btn-secondary:hover { background: var(--bg-3); }
.btn-secondary:active { transform: scale(0.97); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 500;
}

.chip-active {
  background: var(--fg-1);
  color: var(--bg-0);
}

/* Animations */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,159,28,0); }
  50%      { box-shadow: var(--shadow-glow); }
}
.pulse { animation: pulse-glow 2400ms var(--ease-precision) infinite; }

/* Hairline grid background utility (rare use) */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 1;
}