/* Design tokens — Skye Journey
   Single source of truth for colors, blur, shadows, easings, typography.
   Import once at the top of any page CSS. */

:root {
  /* Palette */
  --color-white: #ffffff;
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-05: rgba(255, 255, 255, 0.05);

  --color-blue: #91ceff;
  --color-blue-soft: #7db8ff;
  --color-blue-muted: #7babff;
  --color-blue-glow: #7cc6ffcc;
  --color-selection: #91ceff;

  --color-cream: #fdfde5;

  --color-bg: #000000;
  --color-overlay-dark: rgba(0, 0, 0, 0.3);
  --color-overlay-darker: rgba(0, 0, 0, 0.5);

  /* Glass surfaces (backdrop-blur containers) */
  --glass-bg: rgba(255, 255, 255, 0.22);
  --glass-bg-soft: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.19);

  /* Blur radii */
  --blur-sm: blur(5px);
  --blur-md: blur(8px);
  --blur-lg: blur(10px);
  --blur-xl: blur(15px);

  /* Drop shadows */
  --glow-sm: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))
             drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
  --glow-md: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7))
             drop-shadow(0 0 25px rgba(255, 255, 255, 0.5))
             drop-shadow(0 0 35px rgba(255, 255, 255, 0.4));
  --glow-lg: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9))
             drop-shadow(0 0 40px rgba(255, 255, 255, 0.6))
             drop-shadow(0 0 60px rgba(255, 255, 255, 0.4));

  /* Timings & easings */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-decel-alt: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-symmetric: cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-slower: 800ms;

  /* Radii */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-pill: 999px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;

  /* Z-index scale */
  --z-background: -1;
  --z-base: 1;
  --z-content: 10;
  --z-nav: 100;
  --z-modal: 1000;
  --z-tooltip: 9999;
  --z-cursor: 1000000;

  /* Typography stacks (family definitions live in fonts.css) */
  --font-display: 'genshin impact', 'Cinzel', serif;
  --font-body: 'ZHFont', 'Poppins', sans-serif;
  --font-mono: 'departure-mono', 'SF Mono', 'Monaco', monospace;
  --font-pixel: 'Press Start 2P', monospace;
  --font-serif: 'TrajanPro', 'Cinzel', serif;
  --font-cjk: 'zhcn', sans-serif;
}

::selection {
  background: var(--color-selection);
}