/*
  Design tokens — dark premium model showcase.
  Semantic, not component-specific: components consume these, never raw hex.
*/
:root {
  /* Color — base surfaces. Lifted from near-black to a richer charcoal scale
     so the site reads as premium-grey rather than a near-void mystery box. */
  --color-black: #121214;
  --color-graphite: #202226;
  --color-surface: #272a2e;
  --color-surface-raised: #303338;
  --color-chalk: #f3f1ec;
  --color-white: #ffffff;
  --color-silver: #c6c7c9;
  --color-muted: #94969b;
  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.27);
  --color-accent: #d5001c;
  --color-accent-dim: rgba(213, 0, 28, 0.42);

  /* Electric-model accent (Taycan / Macan Electric / Cayenne Electric light lines) */
  --color-electric: #cfe8ff;

  /* Semantic roles */
  --surface-page: var(--color-black);
  --surface-panel: var(--color-graphite);
  --surface-raised: var(--color-surface-raised);
  --text-primary: var(--color-chalk);
  --text-secondary: var(--color-silver);
  --text-muted: var(--color-muted);
  --text-inverse: var(--color-black);
  --line-hairline: var(--color-border);
  --line-hairline-strong: var(--color-border-strong);
  --accent-signal: var(--color-accent);

  /* Type */
  --font-display: "Inter Tight", "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  --size-label: 0.6875rem;   /* 11px — technical labels */
  --size-small: 0.8125rem;   /* 13px */
  --size-body: 0.9375rem;    /* 15px */
  --size-body-lg: 1.0625rem; /* 17px */
  --size-h2: clamp(2rem, 4vw + 1rem, 3.25rem);
  --size-h1: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --size-statement: clamp(2rem, 4.5vw + 1rem, 4rem);

  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;
  --tracking-label: 0.16em;
  --tracking-wide: 0.08em;

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-normal: 1.5;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --content-max: 1440px;
  --content-gutter: clamp(1.25rem, 4vw, 4rem);
  --rail-width: 1px;

  /* Motion */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); /* expo.out */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);  /* power3.out */
  --duration-fast: 180ms;
  --duration-medium: 420ms;
  --duration-slow: 900ms;

  /* Elevation via light, not shadow-heavy skeuomorphism */
  --glow-hairline: 0 0 0 1px var(--line-hairline);

  --z-nav: 50;
  --z-progress: 40;
  --z-hero-copy: 20;
  --z-hero-media: 10;
  --z-skip-link: 100;
}

@media (prefers-color-scheme: light) {
  /* Concept is intentionally single-theme (dark, cinematic). No light variant offered. */
}