/* Amber Cinematic — Design Tokens
   Quelle: DESIGN.md. Liegen bewusst in :root, damit sie durch jede
   Shadow-DOM-Grenze vererbt werden. */

:root {
  /* Surfaces */
  --surface: #141312;
  --surface-dim: #141312;
  --surface-bright: #3b3937;
  --surface-lowest: #0f0e0d;
  --surface-low: #1d1b1a;
  --surface-container: #211f1e;
  --surface-high: #2b2a28;
  --surface-highest: #363433;
  --surface-variant: #363433;

  /* Content */
  --on-surface: #e6e1df;
  --on-surface-variant: #d6c4ac;
  --outline: #9e8e78;
  --outline-variant: #514532;
  --inverse-surface: #e6e1df;
  --inverse-on-surface: #32302f;

  /* Primary — Amber. Wird als Lichtquelle behandelt, nicht als Fläche. */
  --primary: #ffd89c;
  --on-primary: #422c00;
  --primary-container: #ffb400;
  --on-primary-container: #6b4900;
  --primary-fixed: #ffdeac;
  --primary-dim: #ffba35;
  --on-primary-fixed: #281900;
  --on-primary-fixed-variant: #5f4100;
  --inverse-primary: #7e5700;
  --surface-tint: #ffba35;

  /* Secondary */
  --secondary: #ffb95b;
  --on-secondary: #462a00;
  --secondary-container: #e59400;
  --on-secondary-container: #553400;
  --secondary-fixed: #ffddb6;

  /* Tertiary — deckt sich mit dem Cyan der PolyTowerz-UI */
  --tertiary: #a5e8ff;
  --on-tertiary: #003542;
  --tertiary-container: #00d3fe;
  --tertiary-dim: #3dd7ff;

  /* Error */
  --error: #ffb4ab;
  --error-container: #93000a;

  /* Radien */
  --r-sm: 0.125rem;
  --r: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-full: 9999px;

  /* 8pt-Spacing */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 64px;

  /* Typografie */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display-lg-size: clamp(2.5rem, 8vw, 5.5rem);
  --t-display-md-size: clamp(1.75rem, 4vw, 2.75rem);
  --t-headline-size: clamp(1.125rem, 2vw, 1.5rem);
  --t-body-lg: 1.125rem;
  --t-body-md: 1rem;

  /* Bloom statt Schatten — nie box-shadow mit Schwarzanteil */
  --bloom-sm: 0 0 20px -6px rgb(255 180 0 / 0.20);
  --bloom: 0 0 32px -4px rgb(255 180 0 / 0.18);
  --bloom-lg: 0 0 90px -10px rgb(255 180 0 / 0.28);
  --bloom-hover: 0 0 44px -6px rgb(255 180 0 / 0.34);

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(24px, 5vw, 64px);

  /* Motion — Federkurve als GSAP-Näherung von stiffness 300 / damping 20 */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}