/* ============================================================
   Cosy Fox — Design Tokens (Index 3.0)
   Trend-konform: OKLCH-Layer (perceptual), semantische Aliase
   (Surface / Text / Accent / Hairline / Focus), Container-Tokens.
   Old sRGB-Hex bleibt als Fallback erhalten.
   ============================================================ */

:root {
  /* ---------- Base Color (sRGB Fallback) ---------- */
  --color-creme:      #F5F1EA;
  --color-paper:      #FBF8F2;
  --color-sand:       #D8C8B8;
  --color-sand-soft:  #E6DCCC;
  --color-espresso:   #3A302C;
  --color-espresso-soft: #5A4E48;
  --color-sage:       #A5B29E;
  --color-sage-soft:  #C7CFC1;
  --color-mustard:    #D7B24D;
  --color-mustard-soft: #E8CC85;

  /* 2nd Beige (Christian-Spec, Jun 2026): #D8C8B8 = unser --color-sand.
     Wird als globales Foto-Overlay mit 40 % Deckkraft auf JEDEM Bild angewendet. */
  --color-creme-deep:  #D8C8B8;
  --overlay-photo:     rgba(216, 200, 184, 0.40);

  /* ---------- OKLCH Layer (perceptual color, where supported) ---------- */
  --color-creme-oklch:    oklch(95% 0.018 75);
  --color-sand-oklch:     oklch(82% 0.04 70);
  --color-espresso-oklch: oklch(28% 0.025 50);
  --color-mustard-oklch:  oklch(75% 0.13 85);
  --color-sage-oklch:     oklch(73% 0.04 130);

  /* ---------- Semantic Aliases (Index 3.0) ---------- */
  --surface-base:      var(--color-creme);
  --surface-elevated:  var(--color-paper);
  --surface-sage:      #EFF1EB;          /* very soft sage tint for sections */
  --surface-sage-deep: var(--color-sage-soft);
  --surface-dark:      #2C2420;
  --surface-dark-soft: #3A302C;

  --text-primary:   var(--color-espresso);
  --text-muted:     rgba(58, 48, 44, 0.65);
  --text-on-dark:   var(--color-creme);
  --text-on-dark-soft: #C8BFB6;

  --accent:           var(--color-mustard);
  --accent-secondary: var(--color-sage);

  --hairline:         rgba(58, 48, 44, 0.12);
  --hairline-strong:  rgba(58, 48, 44, 0.24);
  --hairline-accent:  var(--color-mustard);

  --focus-ring:    2px solid var(--color-mustard);
  --focus-offset:  2px;

  /* Back-compat aliases (alt code referenziert noch diese) */
  --color-bg:         var(--surface-base);
  --color-surface:    var(--surface-elevated);
  --color-text:       var(--text-primary);
  --color-text-soft:  var(--text-muted);
  --color-line:       var(--hairline);
  --color-line-strong: var(--hairline-strong);
  --color-overlay:    rgba(58, 48, 44, 0.28);
  --on-dark:          var(--text-on-dark);
  --on-dark-soft:     var(--text-on-dark-soft);

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, "Courier New", monospace;

  --fs-display: clamp(2.75rem, 4.5vw + 1rem, 5.75rem);
  --fs-h1:      clamp(2rem,    3vw + 0.9rem, 3.75rem);
  --fs-h2:      clamp(1.5rem,  1.8vw + 0.75rem, 2.5rem);
  --fs-h3:      clamp(1.25rem, 0.8vw + 0.9rem, 1.625rem);
  --fs-body:    clamp(1rem,    0.25vw + 0.95rem, 1.125rem);
  --fs-small:   0.875rem;
  --fs-xsmall:  0.75rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;

  --tracking-eyebrow:  0.18em;
  --tracking-mono:     0.04em;
  --tracking-headline: 0.005em;

  /* ---------- Spacing ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(5rem, 8vw, 9rem);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --content-narrow: 64ch;

  /* ---------- Border, radius, shadow ---------- */
  /* Legacy radius scale — kept for back-compat. Editorial surfaces should
     migrate to --radius-editorial (= 0) and interactive elements stay on
     --radius-pill / --radius-input. */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Hybrid radius scheme (Index 3.0 review):
     Editorial surfaces sharp, interactive elements stay soft. */
  --radius-editorial: 0;          /* Photos, cards, map, iframe wrap, hero media */
  --radius-photo:     0;
  --radius-map:       0;
  --radius-card:      0;
  --radius-input:     8px;        /* form inputs: slightly soft */
  /* --radius-pill stays 999px above */

  --shadow-soft: 0 1px 2px rgba(58, 48, 44, 0.04), 0 8px 32px rgba(58, 48, 44, 0.06);
  --shadow-lift: 0 2px 4px rgba(58, 48, 44, 0.06), 0 18px 48px rgba(58, 48, 44, 0.10);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-vt:   cubic-bezier(0.2, 0.7, 0.3, 1);

  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-reveal: 900ms;
  --dur-vt:     280ms;

  /* ---------- Z ---------- */
  --z-base:    0;
  --z-elev:    10;
  --z-sticky:  100;
  --z-header:  200;
  --z-actionbar: 350;
  --z-overlay: 800;
  --z-fox:     900;
  --z-modal:   1000;
}

/* Reduced-Motion: durations auf 0, used by alle Komponenten */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --dur-vt: 0ms;
  }
}