/**
 * ADHD Games — Design Tokens
 * Central source of truth for all design values.
 */

:root {
  /* ── Backgrounds ── */
  --color-bg-deep:    hsl(230, 35%, 7%);
  --color-bg-surface: hsl(230, 28%, 10%);
  --color-bg-card:    hsl(230, 25%, 13%);
  --color-bg-card-hover: hsl(230, 25%, 17%);

  /* ── Text ── */
  --color-text-primary: hsl(220, 20%, 92%);
  --color-text-muted:   hsl(220, 15%, 55%);
  --color-text-dim:     hsl(220, 12%, 35%);

  /* ── Mood orb colors (companion mood-color system) ── */
  --color-orb-inhale:  hsl(185, 70%, 55%);   /* teal */
  --color-orb-hold:    hsl(210, 65%, 60%);   /* blue */
  --color-orb-exhale:  hsl(260, 55%, 65%);   /* indigo */
  --color-orb-idle:    hsl(230, 40%, 45%);   /* muted blue */

  /* ── Accent ── */
  --color-accent:       hsl(185, 70%, 55%);
  --color-accent-dim:   hsl(185, 60%, 40%);
  --color-accent-glow:  hsla(185, 70%, 55%, 0.35);

  /* ── Typography ── */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   clamp(0.65rem,  1.5vw, 0.75rem);
  --text-sm:   clamp(0.8rem,   2vw,   0.875rem);
  --text-base: clamp(0.9rem,   2.5vw, 1rem);
  --text-md:   clamp(1rem,     3vw,   1.125rem);
  --text-lg:   clamp(1.1rem,   3.5vw, 1.375rem);
  --text-xl:   clamp(1.3rem,   4vw,   1.75rem);
  --text-2xl:  clamp(1.6rem,   5vw,   2.25rem);
  --text-3xl:  clamp(2rem,     6vw,   3rem);

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px hsla(230, 40%, 3%, 0.4);
  --shadow-md:  0 4px 20px hsla(230, 40%, 3%, 0.5);
  --shadow-lg:  0 8px 40px hsla(230, 40%, 3%, 0.6);
  --shadow-glow: 0 0 40px var(--color-accent-glow);

  /* ── Animation ── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sin: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;
}