/* =========================================================
   Premium Tile Studio — Design Tokens & Farbsystem
   Premium Tile Studio — Token-System
   Zwei eigenständige Farbwelten: Light „Tageslicht" / Dark „Abendlicht".
   Alle Farben OKLCH, Referenzierung ausschließlich über Tokens.
   ========================================================= */

:root {
  /* --- Typografie --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Fluid Type Scale */
  --fs-display-xl: clamp(2.75rem, 7vw, 6rem);
  --fs-display: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-meta: 0.8125rem;

  /* --- Spacing (4pt) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-pad: clamp(5rem, 10vw, 9rem);
  --container: 1280px;
  --pad-inline: clamp(1.25rem, 4vw, 3rem);
  --measure: 66ch;

  /* --- Radien --- */
  --r-sm: 2px;
  --r-md: 6px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 180ms;
  --dur-fast: 250ms;
  --dur-med: 400ms;
  --dur-reveal: 650ms;

  /* --- Markenfarben (konstant in beiden Themes) --- */
  --brand-navy: oklch(0.32 0.09 265);
  --brand-red: oklch(0.50 0.20 27);

  /* --- Ebenen --- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-menu: 400;
}

/* =========================================================
   LIGHT — „Tageslicht"
   ========================================================= */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --paper: oklch(0.972 0.005 95);
  --bone: oklch(0.943 0.009 88);
  --stone: oklch(0.882 0.012 84);
  --raise: oklch(0.988 0.003 95);
  --ink: oklch(0.245 0.012 70);
  --ink-soft: oklch(0.43 0.012 76);
  --line: oklch(0.868 0.008 84);
  --line-strong: oklch(0.72 0.01 80);
  --accent: oklch(0.36 0.10 264);
  --accent-hover: oklch(0.31 0.10 264);
  --accent-on: oklch(0.975 0.004 95);
  --accent-red: oklch(0.50 0.20 27);
  --glow: oklch(0.94 0.03 95 / 0.0);
  --lamp: oklch(0.93 0.04 90);
  --focus: oklch(0.36 0.10 264);

  --shadow-overlay: 0 24px 60px -40px rgb(0 0 0 / 0.18);
  --shadow-lift: 0 1px 0 oklch(0.868 0.008 84);

  /* Dunkles Band (Punktuation, in beiden Themes dunkel) */
  --band-bg: oklch(0.215 0.010 66);
  --band-bg-raise: oklch(0.255 0.011 68);
  --band-ink: oklch(0.93 0.008 92);
  --band-ink-soft: oklch(0.72 0.010 85);
  --band-line: oklch(0.34 0.010 70);

  /* Raum-Szene — Tageslicht */
  --sc-wall: oklch(0.90 0.012 88);
  --sc-wall-shade: oklch(0.845 0.014 86);
  --sc-wall-side: oklch(0.875 0.013 87);
  --sc-ceiling: oklch(0.945 0.008 90);
  --sc-floor: oklch(0.80 0.018 82);
  --sc-line: oklch(0.58 0.015 78);
  --sc-line-soft: oklch(0.70 0.014 80);
  --sc-sky: oklch(0.86 0.045 240);
  --sc-beam: oklch(0.97 0.02 95 / 0.55);
  --sc-raw: oklch(0.78 0.010 80);
  --sc-raw-shade: oklch(0.72 0.010 78);

  /* Materialien — Tageslicht */
  --mat-feinsteinzeug: oklch(0.86 0.010 80);
  --mat-feinsteinzeug-line: oklch(0.74 0.010 78);
  --mat-naturstein: oklch(0.83 0.030 82);
  --mat-naturstein-line: oklch(0.72 0.028 80);
  --mat-marmor: oklch(0.94 0.006 90);
  --mat-marmor-line: oklch(0.78 0.008 80);
  --mat-beton: oklch(0.74 0.008 90);
  --mat-beton-line: oklch(0.63 0.008 88);
  --mat-keramik: oklch(0.72 0.035 200);
  --mat-keramik-line: oklch(0.62 0.030 200);
  --mat-epoxid: oklch(0.44 0.045 235);
  --mat-epoxid-gloss: oklch(0.90 0.02 230 / 0.30);
  --mat-epoxid-wand: oklch(0.84 0.018 82);
  --mat-epoxid-sheen: oklch(0.99 0.005 95 / 0.28);
  --mat-designboden: oklch(0.72 0.055 70);
  --mat-designboden-line: oklch(0.60 0.050 68);
}

/* =========================================================
   DARK — „Abendlicht"
   ========================================================= */
:root[data-theme='dark'] {
  color-scheme: dark;

  --paper: oklch(0.175 0.008 65);
  --bone: oklch(0.21 0.010 68);
  --stone: oklch(0.27 0.012 70);
  --raise: oklch(0.235 0.010 66);
  --ink: oklch(0.925 0.008 95);
  --ink-soft: oklch(0.70 0.010 85);
  --line: oklch(0.315 0.010 70);
  --line-strong: oklch(0.42 0.012 72);
  --accent: oklch(0.70 0.10 255);
  --accent-hover: oklch(0.78 0.09 250);
  --accent-on: oklch(0.19 0.012 264);
  --accent-red: oklch(0.63 0.18 25);
  --lamp: oklch(0.82 0.09 85);
  --glow: oklch(0.82 0.09 85 / 0.14);
  --focus: oklch(0.70 0.10 255);

  --shadow-overlay: 0 24px 60px -40px rgb(0 0 0 / 0.55);
  --shadow-lift: 0 1px 0 oklch(0.315 0.010 70);

  /* Dunkles Band */
  --band-bg: oklch(0.155 0.007 62);
  --band-bg-raise: oklch(0.20 0.009 65);
  --band-ink: oklch(0.93 0.008 92);
  --band-ink-soft: oklch(0.70 0.010 85);
  --band-line: oklch(0.30 0.009 68);

  /* Raum-Szene — Abendlicht */
  --sc-wall: oklch(0.30 0.012 72);
  --sc-wall-shade: oklch(0.255 0.011 70);
  --sc-wall-side: oklch(0.275 0.012 71);
  --sc-ceiling: oklch(0.225 0.010 68);
  --sc-floor: oklch(0.335 0.016 74);
  --sc-line: oklch(0.48 0.012 76);
  --sc-line-soft: oklch(0.40 0.011 73);
  --sc-sky: oklch(0.30 0.045 262);
  --sc-beam: oklch(0.82 0.09 85 / 0.30);
  --sc-raw: oklch(0.33 0.008 70);
  --sc-raw-shade: oklch(0.29 0.008 68);

  /* Materialien — Abendlicht (gedämpft, warm) */
  --mat-feinsteinzeug: oklch(0.42 0.010 74);
  --mat-feinsteinzeug-line: oklch(0.33 0.010 72);
  --mat-naturstein: oklch(0.46 0.026 76);
  --mat-naturstein-line: oklch(0.37 0.022 74);
  --mat-marmor: oklch(0.52 0.008 82);
  --mat-marmor-line: oklch(0.40 0.008 76);
  --mat-beton: oklch(0.38 0.007 82);
  --mat-beton-line: oklch(0.31 0.007 80);
  --mat-keramik: oklch(0.40 0.028 205);
  --mat-keramik-line: oklch(0.33 0.024 205);
  --mat-epoxid: oklch(0.30 0.04 238);
  --mat-epoxid-gloss: oklch(0.82 0.05 240 / 0.22);
  --mat-epoxid-wand: oklch(0.42 0.014 76);
  --mat-epoxid-sheen: oklch(0.82 0.09 85 / 0.14);
  --mat-designboden: oklch(0.44 0.045 66);
  --mat-designboden-line: oklch(0.35 0.040 64);
}