/*
  Digital Temple Runtime Theme
  Source of truth for shared CSS tokens consumed by Astro components and plain JS.
*/
:root {
  /* Z-index scale */
  --z-bg: 0;
  --z-atmosphere: 5;
  --z-totem: 10;
  --z-content: 20;
  --z-floating: 30;
  --z-nav: 50;
  --z-modal: 100;

  /* Color system — fallback hex + perceptual OKLCH tokens */
  --color-void-black-fallback: #0a0a0b;
  --color-gold-pulse-fallback: #e2b05e;
  --color-sovereign-cyan-fallback: #00e5ff;

  --color-void-black: oklch(0.145 0.006 285);
  --color-temple-surface: oklch(0.19 0.018 285);
  --color-temple-border: oklch(0.33 0.025 285);
  --color-gold-pulse: oklch(0.78 0.12 78);
  --color-gold-pulse-hot: oklch(0.87 0.16 82);
  --color-sovereign-cyan: oklch(0.82 0.14 220);
  --color-ritual-white: oklch(0.965 0.006 285);
  --color-ritual-muted: oklch(0.66 0.02 285);

  /* Glassmorphism / material */
  --glass-bg: color-mix(in oklch, var(--color-void-black) 76%, transparent);
  --glass-bg-strong: color-mix(in oklch, var(--color-temple-surface) 82%, transparent);
  --glass-border: color-mix(in oklch, var(--color-gold-pulse) 38%, transparent);
  --glass-blur: 16px;
  --glass-radius: 20px;
  --glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --glass-glow: 0 0 42px color-mix(in oklch, var(--color-gold-pulse) 28%, transparent);

  /* Motion */
  --ease-temple-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-gold-pulse: cubic-bezier(0.37, 0, 0.63, 1);
  --duration-flow: 1800ms;
  --duration-breathe: 4200ms;

  /* Runtime controls */
  --totem-scale: 1;
}

@supports not (color: oklch(0.7 0.1 80)) {
  :root {
    --color-void-black: var(--color-void-black-fallback);
    --color-gold-pulse: var(--color-gold-pulse-fallback);
    --color-gold-pulse-hot: #ffd37a;
    --color-sovereign-cyan: var(--color-sovereign-cyan-fallback);
    --color-ritual-white: #f5f5f7;
    --color-ritual-muted: #8a8a9a;
    --glass-bg: rgba(10, 10, 11, 0.76);
    --glass-bg-strong: rgba(18, 18, 24, 0.82);
    --glass-border: rgba(226, 176, 94, 0.38);
  }
}