/* AutoglasX — design tokens
 * Custom theme (schwarz/rot) · dark / display-condensed-bold / warm
 * Extracted from brand assets: near-black paper, crimson accent, metallic-white display.
 */

:root {
  /* ---- Colour · OKLCH, tinted neutrals (no pure #000/#fff) ---- */
  --color-paper:        oklch(13% 0.012 25);   /* near-black canvas */
  --color-paper-2:      oklch(16.5% 0.014 25); /* raised cards */
  --color-paper-3:      oklch(21% 0.016 25);   /* panels / hover */
  --color-paper-inset:  oklch(10.5% 0.010 25); /* recessed wells */

  --color-ink:          oklch(96% 0.006 40);   /* metallic near-white */
  --color-ink-2:        oklch(78% 0.008 40);   /* secondary text */
  --color-muted:        oklch(60% 0.010 30);   /* de-emphasised */

  --color-rule:         oklch(30% 0.014 25);   /* dividers */
  --color-rule-2:       oklch(24% 0.012 25);   /* faint dividers */

  --color-accent:       oklch(55% 0.205 27);   /* crimson — fills, key rules */
  --color-accent-bright:oklch(64% 0.225 27);   /* glow / hero numeral / hover */
  --color-accent-deep:  oklch(46% 0.185 27);   /* pressed / gradients-of-fill */
  --color-accent-ink:   oklch(99% 0.004 40);   /* text on crimson */
  --color-accent-soft:  oklch(30% 0.09 27);    /* red-tinted borders on dark */

  --color-warning:      oklch(80% 0.15 78);    /* amber — StVO caution */
  --color-warning-soft: oklch(30% 0.06 78);

  --color-focus:        oklch(68% 0.20 27);    /* focus ring */

  /* ---- Type ---- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  --text-3xl:  clamp(2.1rem, 1.3rem + 3.6vw, 3.4rem);
  --text-4xl:  clamp(2.8rem, 1.4rem + 6vw, 5rem);
  --text-display-s: clamp(3rem, 1.5rem + 8vw, 6rem);
  --text-display:   clamp(2.9rem, 1rem + 12vw, 8rem);

  --leading-tight: 0.92;
  --leading-snug:  1.12;
  --leading-body:  1.6;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.06em;
  --tracking-caps:  0.14em;

  /* ---- Spacing · 4pt ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Rules ---- */
  --rule-hair: 1px;
  --rule-thick: 3px;

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur-mid:  240ms;
  --dur-slow: 520ms;
  --dur-xslow: 900ms;
  --dur-drift: 24s;    /* atmospheric background drift */
  --dur-streak: 17s;   /* light-streak travel */
  --dur-marquee: 32s;  /* ticker loop */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Derived glows / shadows / tints (accent-based) ---- */
  --glow-strong: oklch(55% 0.205 27 / 0.55);
  --glow-mid:    oklch(55% 0.205 27 / 0.30);
  --glow-soft:   oklch(55% 0.205 27 / 0.20);
  --glow-bright: oklch(64% 0.225 27 / 0.55);
  --glow-deep:   oklch(46% 0.185 27 / 0.20);
  --tint-accent: oklch(55% 0.205 27 / 0.10);
  --color-nav-bg:    oklch(15% 0.012 25 / 0.72);
  --color-nav-panel: oklch(15% 0.012 25 / 0.96);
  --shadow-1: 0 12px 40px -18px oklch(4% 0.004 25 / 0.9);
  --shadow-2: 0 20px 50px -18px oklch(4% 0.004 25 / 0.9);
  --shadow-3: 0 30px 70px -24px oklch(3% 0.004 25 / 0.95);

  /* ---- Atmosphere · site-wide living-carbon background ---- */
  --bg-glow-1:    oklch(55% 0.205 27 / 0.16);  /* drifting aurora A */
  --bg-glow-2:    oklch(64% 0.225 27 / 0.11);  /* drifting aurora B */
  --bg-glow-cool: oklch(30% 0.05 27 / 0.5);    /* upper wash */
  --bg-spot:      oklch(60% 0.20 27 / 0.14);   /* cursor spotlight */
  --bg-vignette:  oklch(6% 0.006 25 / 0.72);

  /* ---- Texture ---- */
  --hex-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23e5352b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  --hex-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23ffffff' fill-opacity='0.022' fill-rule='evenodd'/%3E%3C/svg%3E");
}