/* ============================================================
   DIMENDIA — Base / Design System
   Concept: depth, dimension, layers, perspective
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
/* Handy-Fotos mit EXIF-Drehung auf allen Browsern korrekt ausrichten */
img { image-orientation: from-image; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* font pairing — overridden by [data-font] */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* fluid type scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.9rem, 1.9rem + 4.6vw, 6rem);
  --step-5:  clamp(3.6rem, 1.9rem + 8vw, 9rem);

  /* spacing */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(5rem, 10vw, 11rem);
  --radius: 18px;
  --radius-lg: 30px;

  --maxw: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Font pairings ---- */
[data-font="kinetik"]   { --font-display: 'Space Grotesk', sans-serif; --font-body: 'Manrope', sans-serif; }
[data-font="editorial"] { --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Manrope', sans-serif; }
[data-font="neo"]       { --font-display: 'Sora', sans-serif; --font-body: 'Manrope', sans-serif; }

/* ============================================================
   COLOR SCHEMES  (accent only) × THEME (light/dark)
   ============================================================ */
[data-scheme="nocturne"] { --accent: oklch(0.88 0.20 128); --accent-ink: oklch(0.22 0.05 140); }
[data-scheme="aurora"]   { --accent: oklch(0.72 0.21 330); --accent-ink: oklch(0.98 0.01 330); }
[data-scheme="cobalt"]   { --accent: oklch(0.70 0.18 255); --accent-ink: oklch(0.98 0.01 255); }

/* Dark theme surfaces (default) */
[data-theme="dark"] {
  --bg:        oklch(0.155 0.012 265);
  --bg-2:      oklch(0.185 0.014 265);
  --surface:   oklch(0.205 0.015 265);
  --surface-2: oklch(0.245 0.016 265);
  --line:      oklch(1 0 0 / 0.10);
  --line-strong: oklch(1 0 0 / 0.20);
  --ink:       oklch(0.97 0.005 265);
  --ink-soft:  oklch(0.72 0.012 265);
  --ink-faint: oklch(0.55 0.012 265);
  --logo-invert: 1;
  --shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
  --grain-op: 0.05;
  color-scheme: dark;
}
/* Light theme surfaces */
[data-theme="light"] {
  --bg:        oklch(0.975 0.004 265);
  --bg-2:      oklch(0.945 0.005 265);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.97 0.004 265);
  --line:      oklch(0.2 0.02 265 / 0.12);
  --line-strong: oklch(0.2 0.02 265 / 0.28);
  --ink:       oklch(0.18 0.015 265);
  --ink-soft:  oklch(0.42 0.015 265);
  --ink-faint: oklch(0.58 0.012 265);
  --logo-invert: 0;
  --shadow: 0 30px 70px -34px rgba(20,22,30,0.30);
  --grain-op: 0.03;
  color-scheme: light;
}
/* darken accent slightly in light mode for contrast */
[data-theme="light"][data-scheme="nocturne"] { --accent: oklch(0.74 0.18 128); --accent-ink: oklch(0.99 0.01 130); }

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before {
  content: ""; width: 1.4em; height: 1px; background: var(--accent);
}

.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.45; text-wrap: pretty; max-width: 46ch; }

/* layout primitives */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.stack { display: flex; flex-direction: column; }

/* dotted accent — DIMENDIA three-dot motif */
.tridots { display: inline-flex; gap: 0.42em; align-items: center; }
.tridots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); display: block; }

/* page grain + perspective context */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: var(--grain-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* accent text */
.accent { color: var(--accent); }
mark { background: var(--accent); color: var(--accent-ink); padding: 0 0.18em; border-radius: 4px; }

/* selection */
::selection { background: var(--accent); color: var(--accent-ink); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}