/* ══════════════════════════════════════════
   DESIGN TOKENS — Organic Premium Harmony
   ══════════════════════════════════════════ */

:root {
  /* Background */
  --bg-deep: #0A1A1A;
  --bg-overlay: rgba(10, 26, 26, 0.75);

  /* Glass — Regular */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
  --glass-blur: blur(22px) saturate(180%);

  /* Glass — Clear */
  --glass-clear-bg: rgba(255, 255, 255, 0.05);
  --glass-clear-border: rgba(255, 255, 255, 0.10);
  --glass-clear-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
  --glass-clear-blur: blur(15px) saturate(160%);

  /* Glass — Frosted */
  --glass-frosted-bg: rgba(255, 255, 255, 0.12);
  --glass-frosted-border: rgba(255, 255, 255, 0.20);
  --glass-frosted-shadow: 0 12px 48px rgba(0, 0, 0, 0.40);
  --glass-frosted-blur: blur(40px) saturate(200%);

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;

  /* Pastel Accents */
  --pale-lime: #E8F5C8;
  --soft-lavender: #E0C8F5;
  --mint: #C8F5E8;
  --peach: #F5DCC8;

  /* Accent Tints */
  --lime-tint: rgba(232, 245, 200, 0.15);
  --lavender-tint: rgba(224, 200, 245, 0.12);
  --mint-tint: rgba(200, 245, 232, 0.15);
  --peach-tint: rgba(245, 220, 200, 0.12);

  /* Spacing */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 40px;

  /* Border Radius */
  --r-sm: 16px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-capsule: 9999px;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur()) {
  :root {
    --glass-bg: rgba(10, 26, 26, 0.88);
    --glass-clear-bg: rgba(10, 26, 26, 0.82);
    --glass-frosted-bg: rgba(10, 26, 26, 0.92);
  }
}