/* ==========================================================
   variables.css — TTC Rheindahlen 1950
   Global design tokens, reset, and base element styles.
   Must be loaded first on every page.
   ========================================================== */

/* ── Design tokens — Dark theme (default) ───────────────── */
:root {
  /* Brand */
  --red:           #C0392B;
  --red-dark:      #96281B;

  /* Backgrounds */
  --black:         #111111;
  --surface:       #181818;
  --surface-2:     #222222;

  /* Text */
  --white:         #F5F5F5;
  --text-muted:    #888888;

  /* Borders & dividers */
  --border:        rgba(255, 255, 255, 0.07);

  /* Typography */
  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'Barlow', sans-serif;

  /* Layout */
  --nav-height:    72px;
  --max-width:     1200px;

  /* Motion */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation */
  --shadow:        0 4px 32px rgba(0, 0, 0, 0.5);

  /* ── Theme-aware tokens ─────────────────────────────── */
  /* RGB channels of --white, used for rgb(var(--text-rgb) / alpha) */
  --text-rgb:            245 245 245;

  /* Scrolled navbar background */
  --surface-scrolled:    rgba(17, 17, 17, 0.97);

  /* Mobile sub-list background */
  --sub-list-bg:         rgba(0, 0, 0, 0.2);

  /* Hero / CTA section gradient */
  --hero-gradient:       linear-gradient(135deg, #230908 0%, #301212 40%, #0d0d0d 100%);
  --cta-gradient:        linear-gradient(135deg, #230908 0%, #301212 60%, #0d0d0d 100%);

  /* Subtle surface tints */
  --surface-tint:        rgba(255, 255, 255, 0.04);
  --surface-tint-xs:     rgba(255, 255, 255, 0.02);
}

/* ── Light theme overrides ──────────────────────────────── */
[data-theme="light"] {
  --black:               #F2F1EE;
  --surface:             #FFFFFF;
  --surface-2:           #E5E4E1;
  --white:               #1A1A1A;
  --text-muted:          #505050;
  --border:              rgba(0, 0, 0, 0.09);
  --shadow:              0 4px 32px rgba(0, 0, 0, 0.08);

  --text-rgb:            26 26 26;
  --surface-scrolled:    rgba(255, 255, 255, 0.97);
  --sub-list-bg:         rgba(0, 0, 0, 0.05);
  --hero-gradient:       linear-gradient(135deg, #5c1410 0%, #7a1b18 35%, #3e0e0b 100%);
  --cta-gradient:        linear-gradient(135deg, #5c1410 0%, #7a1b18 60%, #3e0e0b 100%);
  --surface-tint:        rgba(0, 0, 0, 0.04);
  --surface-tint-xs:     rgba(0, 0, 0, 0.025);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  padding-top: var(--nav-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a       { color: inherit; text-decoration: none; }
ul      { list-style: none; }
button  { font-family: inherit; }
img     { max-width: 100%; display: block; }