/* ==========================================================================
   YAHCHEH DESIGN TOKENS
   Single source of truth for color, type, spacing, motion and skin palettes.
   Reference: Yahcheh hero artwork, UI sprite sheet, visual skins concept.
   ========================================================================== */

:root {
  /* --- base surface (skin-cosmic is the default/root palette) --- */
  --yah-bg: #03050b;
  --yah-bg-2: #070b16;
  --yah-surface: #080d16;
  --yah-surface-2: #0d1526;

  --yah-text: #f2eee4;
  --yah-muted: #8b93a5;

  /* --- gold, constant across skins: the Yahcheh signature --- */
  --yah-gold: #d4b16a;
  --yah-gold-bright: #f0d18a;
  --yah-gold-dim: #8a713f;

  /* --- cosmic accents (default) --- */
  --yah-blue: #7fa9e8;
  --yah-violet: #8c6cff;
  --yah-accent: var(--yah-blue);
  --yah-accent-2: var(--yah-violet);

  --yah-border: rgba(212, 177, 106, 0.2);
  --yah-glow: rgba(212, 177, 106, 0.3);

  /* gradient stops used by the background engine, per-skin overridable */
  --yah-grad-1: #0a1230;
  --yah-grad-2: #1c1440;
  --yah-grad-3: #060812;

  /* particle + motion intensity, read by JS via getComputedStyle */
  --yah-particle-density: 1;
  --yah-particle-speed: 1;
  --yah-breath-duration: 22s;

  --yah-radius: 4px;
  --yah-radius-lg: 14px;
  --yah-radius-pill: 999px;

  --yah-transition: cubic-bezier(0.2, 0.8, 0.2, 1);
  --yah-transition-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --yah-transition-slow: 900ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --yah-font-display: "Cinzel", "Cormorant Garamond", serif;
  --yah-font-body: "Inter", sans-serif;
  --yah-tracking-wide: 0.14em;
  --yah-tracking-atmosphere: 0.14em;

  --yah-space-1: 4px;
  --yah-space-2: 8px;
  --yah-space-3: 16px;
  --yah-space-4: 24px;
  --yah-space-5: 40px;
  --yah-space-6: 64px;
  --yah-space-7: 96px;

  --yah-z-bg: -10;
  --yah-z-content: 1;
  --yah-z-nav: 50;
  --yah-z-portal: 100;

  color-scheme: dark;
}

/* ==========================================================================
   SKIN: COSMIC — deep space, exploration, infinity
   Mood: vast, mysterious, epic, otherworldly. Texture: stars, nebula, cosmic
   dust, light rays.
   ========================================================================== */
.skin-cosmic {
  --yah-bg: #03050b;
  --yah-surface: #080d16;
  --yah-accent: #7fa9e8;
  --yah-accent-2: #8c6cff;
  --yah-border: rgba(212, 177, 106, 0.2);
  --yah-glow: rgba(127, 169, 232, 0.28);
  --yah-grad-1: #0d1b3d;
  --yah-grad-2: #241a52;
  --yah-grad-3: #03050b;
  --yah-particle-density: 1;
  --yah-particle-speed: 1;
  --yah-tracking-atmosphere: 0.14em;
}

/* ==========================================================================
   SKIN: ANCIENT — lost civilizations, mystery, legacy
   Mood: ancient, sacred, timeless, powerful. Texture: stone, gold, dust,
   firelight, ruins.
   ========================================================================== */
.skin-ancient {
  --yah-bg: #0e0906;
  --yah-surface: #16100a;
  --yah-text: #f2e6d0;
  --yah-accent: #c98a3f;
  --yah-accent-2: #a85a2e;
  --yah-border: rgba(217, 164, 65, 0.28);
  --yah-glow: rgba(201, 138, 63, 0.32);
  --yah-grad-1: #2b1a0d;
  --yah-grad-2: #4a2c14;
  --yah-grad-3: #0e0906;
  --yah-particle-density: 0.6;
  --yah-particle-speed: 0.7;
  --yah-tracking-atmosphere: 0.18em;
}

/* ==========================================================================
   SKIN: VOID — darkness, silence, the unknown
   Mood: minimal, intense, mysterious, abstract. Texture: shadows, fog,
   smoke, minimal light.
   ========================================================================== */
.skin-void {
  --yah-bg: #030303;
  --yah-surface: #0a0a0b;
  --yah-text: #e8e9ec;
  --yah-muted: #6c6f76;
  --yah-accent: #9a9da3;
  --yah-accent-2: #4b4d52;
  --yah-border: rgba(232, 233, 236, 0.14);
  --yah-glow: rgba(232, 233, 236, 0.16);
  --yah-grad-1: #131315;
  --yah-grad-2: #050506;
  --yah-grad-3: #000000;
  --yah-particle-density: 0.35;
  --yah-particle-speed: 0.5;
  --yah-tracking-atmosphere: 0.22em;
}

/* ==========================================================================
   SKIN: PSYCHEDELIC — sound, frequency, consciousness
   Mood: vibrant, psychedelic, energized, trance. Texture: light waves,
   fractals, neon, energy fields.
   ========================================================================== */
.skin-psychedelic {
  --yah-bg: #0a0414;
  --yah-surface: #130a24;
  --yah-accent: #29c4d9;
  --yah-accent-2: #c239b3;
  --yah-border: rgba(194, 57, 179, 0.3);
  --yah-glow: rgba(41, 196, 217, 0.32);
  --yah-grad-1: #3a1666;
  --yah-grad-2: #6a2fb0;
  --yah-grad-3: #0a0414;
  --yah-particle-density: 1.4;
  --yah-particle-speed: 1.3;
  --yah-tracking-atmosphere: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --yah-particle-density: 0;
    --yah-particle-speed: 0;
  }
}