/* Car8 Core Tokens and Utilities */

.car8-block {
  /* Core palette */
  --car8-blue: #2ba7ff;
  --car8-purple: #ca45ff;
  --car8-orange: #fe881b;
  --car8-text: #efefef;
  --car8-bg: #0b0f14;
  --car8-panel: #121924;

  /* Derived tokens */
  --car8-ink: var(--car8-text);
  --car8-ink-muted: rgba(239,239,239,0.72);
  --car8-ink-soft: rgba(239,239,239,0.56);
  --car8-surface: var(--car8-panel);
  --car8-border: 1px solid rgba(255,255,255,0.10);
  --car8-border-strong: 1px solid rgba(255,255,255,0.20);
  --car8-divider: 1px solid rgba(255,255,255,0.08);
  --car8-accent: var(--car8-blue);
  --car8-accent-ink: #0b0f14;

  /* Type tokens */
  --car8-font-sans: "Jura", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --car8-h1: 48px;
  --car8-h2: 36px;
  --car8-h3: 28px;
  --car8-body: 16px;
  --car8-small: 13px;
  --car8-lh-tight: 1.1;
  --car8-lh: 1.6;

  /* Spacing tokens */
  --car8-1: 4px;
  --car8-2: 8px;
  --car8-3: 12px;
  --car8-4: 16px;
  --car8-5: 24px;
  --car8-6: 32px;
  --car8-7: 48px;
  --car8-8: 64px;

  /* Radius tokens */
  --car8-r-sm: 6px;
  --car8-r-md: 12px;
  --car8-r-lg: 30px;
  --car8-r-pill: 999px;
  --car8-radius: 30px;

  /* Shadow tokens */
  --car8-shadow: 0 8px 24px rgba(0,0,0,0.10);
  --car8-shadow-hover: 0 12px 32px rgba(0,0,0,0.14);
  --car8-glow: 0 0 18px rgba(43,167,255,0.18), 0 0 28px rgba(202,69,255,0.14);

  /* Gradient tokens */
  --car8-grad: linear-gradient(90deg, var(--car8-blue), var(--car8-purple), var(--car8-orange));
}

/* Utilities */

.car8-text-ink { color: var(--car8-ink); }
.car8-text-muted { color: var(--car8-ink-muted); }
.car8-text-soft { color: var(--car8-ink-soft); }
.car8-bg { background: var(--car8-bg); }
.car8-surface { background: var(--car8-surface); }
.car8-panel {
  background: var(--car8-panel);
  border: var(--car8-border);
  border-radius: var(--car8-radius);
  box-shadow: var(--car8-glow);
}
.car8-border { border: var(--car8-border); }
.car8-border-strong { border: var(--car8-border-strong); }
.car8-divider { border-top: var(--car8-divider); }

.car8-radius-sm { border-radius: var(--car8-r-sm); }
.car8-radius-md { border-radius: var(--car8-r-md); }
.car8-radius-lg { border-radius: var(--car8-r-lg); }
.car8-radius-pill { border-radius: var(--car8-r-pill); }
.car8-radius { border-radius: var(--car8-radius); }

.car8-shadow { box-shadow: var(--car8-shadow); }
.car8-shadow-hover { box-shadow: var(--car8-shadow-hover); }

.car8-grad { background: var(--car8-grad); }
.car8-glow { box-shadow: var(--car8-glow); }
.car8-grad-text {
  background: var(--car8-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.car8-font-sans { font-family: var(--car8-font-sans); }
.car8-font { font-family: var(--car8-font-sans); }
.car8-h1 { font-size: var(--car8-h1); line-height: var(--car8-lh-tight); letter-spacing: -0.01em; }
.car8-h2 { font-size: var(--car8-h2); line-height: var(--car8-lh-tight); }
.car8-h3 { font-size: var(--car8-h3); line-height: 1.2; }
.car8-body { font-size: var(--car8-body); line-height: var(--car8-lh); }
.car8-small { font-size: var(--car8-small); line-height: 1.4; }
.car8-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.car8-pad-4 { padding: var(--car8-4); }
.car8-pad-5 { padding: var(--car8-5); }
.car8-pad-6 { padding: var(--car8-6); }
.car8-pad-7 { padding: var(--car8-7); }
.car8-pad-8 { padding: var(--car8-8); }

.car8-gap-4 { gap: var(--car8-4); }
.car8-gap-5 { gap: var(--car8-5); }
.car8-gap-6 { gap: var(--car8-6); }

.car8-btn-primary {
  background: var(--car8-accent);
  color: var(--car8-accent-ink);
  border: 1px solid var(--car8-accent);
  border-radius: var(--car8-r-sm);
  padding: 12px 20px;
  font-family: var(--car8-font-sans);
  font-size: var(--car8-body);
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}

.car8-btn-secondary {
  background: transparent;
  color: var(--car8-ink);
  border: 1px solid var(--car8-border-strong);
  border-radius: var(--car8-r-sm);
  padding: 12px 20px;
  font-family: var(--car8-font-sans);
  font-size: var(--car8-body);
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}