/* Zenduro brand tokens · v1.0.0 · 2026-04-18
 * Import this once at the root of your app.
 * All other CSS references these variables — never hardcode hex/px. */

/* Self-hosted fonts — no requests leave the server. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/sora-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/sora-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/sora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/sora-800.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-700.woff2') format('woff2');
}

:root {
  /* — Color · Primary — */
  --zd-asphalt:  #0A0A0A;
  --zd-orange:   #F26B1F;
  --zd-paper:    #F5F1EB;

  /* — Color · Support — */
  --zd-panel:    #141414;
  --zd-hairline: #3A3A3A;
  --zd-mute:     #6B6B6B;
  --zd-carplay:  #FF8A3D;
  --zd-deep:     #C14E0F;

  /* — Color · Semantic — */
  --zd-bg:             var(--zd-asphalt);
  --zd-bg-raised:      var(--zd-panel);
  --zd-fg:             var(--zd-paper);
  --zd-fg-muted:       var(--zd-mute);
  --zd-accent:         var(--zd-orange);
  --zd-accent-hover:   var(--zd-carplay);
  --zd-accent-pressed: var(--zd-deep);
  --zd-border:         var(--zd-hairline);

  /* — Font — */
  --zd-font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --zd-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* — Font size — */
  --zd-text-display: 72px;
  --zd-text-h1:      48px;
  --zd-text-h2:      32px;
  --zd-text-h3:      22px;
  --zd-text-body:    16px;
  --zd-text-small:   14px;
  --zd-text-mono-md: 13px;
  --zd-text-mono-sm: 11px;
  --zd-text-mono-xs: 10px;

  /* — Font weight — */
  --zd-weight-regular:  400;
  --zd-weight-medium:   500;
  --zd-weight-semibold: 600;
  --zd-weight-bold:     700;
  --zd-weight-black:    800;

  /* — Letter spacing — */
  --zd-track-tight:  -0.03em;
  --zd-track-normal: 0;
  --zd-track-wide:   0.1em;
  --zd-track-wider:  0.2em;

  /* — Line height — */
  --zd-leading-tight:  0.95;
  --zd-leading-snug:   1.2;
  --zd-leading-normal: 1.5;
  --zd-leading-loose:  1.7;

  /* — Space — */
  --zd-space-1: 4px;
  --zd-space-2: 8px;
  --zd-space-3: 12px;
  --zd-space-4: 16px;
  --zd-space-5: 24px;
  --zd-space-6: 32px;
  --zd-space-7: 48px;
  --zd-space-8: 64px;
  --zd-space-9: 96px;

  /* — Radius — */
  --zd-radius-none: 0;
  --zd-radius-sm:   2px;
  --zd-radius-md:   6px;
  --zd-radius-lg:   12px;
  --zd-radius-full: 9999px;
}

/* — Base defaults (opt-in by applying to body or container) — */
.zd-root {
  background: var(--zd-bg);
  color: var(--zd-fg);
  font-family: var(--zd-font-display);
  font-size: var(--zd-text-body);
  line-height: var(--zd-leading-normal);
  font-feature-settings: "ss01", "cv11"; /* Sora stylistic set + alternate g */
  -webkit-font-smoothing: antialiased;
}

/* — Semantic utility classes (optional) — */
.zd-display  { font: var(--zd-weight-bold) var(--zd-text-display)/var(--zd-leading-tight) var(--zd-font-display); letter-spacing: var(--zd-track-tight); }
.zd-h1       { font: var(--zd-weight-bold) var(--zd-text-h1)/var(--zd-leading-snug) var(--zd-font-display); letter-spacing: var(--zd-track-tight); }
.zd-h2       { font: var(--zd-weight-bold) var(--zd-text-h2)/var(--zd-leading-snug) var(--zd-font-display); letter-spacing: -0.01em; }
.zd-h3       { font: var(--zd-weight-semibold) var(--zd-text-h3)/var(--zd-leading-snug) var(--zd-font-display); }
.zd-body     { font: var(--zd-weight-regular) var(--zd-text-body)/var(--zd-leading-normal) var(--zd-font-display); }
.zd-small    { font: var(--zd-weight-medium) var(--zd-text-small)/var(--zd-leading-normal) var(--zd-font-display); }
.zd-mono     { font: var(--zd-weight-regular) var(--zd-text-mono-md)/var(--zd-leading-normal) var(--zd-font-mono); }
.zd-label    { font: var(--zd-weight-medium) var(--zd-text-mono-sm)/1 var(--zd-font-mono); letter-spacing: var(--zd-track-wide); text-transform: uppercase; }
.zd-eyebrow  { font: var(--zd-weight-medium) var(--zd-text-mono-xs)/1 var(--zd-font-mono); letter-spacing: var(--zd-track-wider); text-transform: uppercase; color: var(--zd-fg-muted); }

/* — CarPlay context override — use inside CarPlay viewport only — */
.zd-carplay-context {
  --zd-accent: var(--zd-carplay);
  --zd-accent-hover: var(--zd-carplay);
}