/* ==========================================================================
   tokens.css — Design tokens for perseidpixels.co
   Mobile-first. Base = 320px.
   ========================================================================== */

/* ---------- Breakpoint custom properties ---------- */
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

/* ---------- Spacing scale (4px base) ---------- */
:root {
  --space-0: 0;
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
}

/* ---------- Dynamic viewport unit ---------- */
:root {
  /* Fallback; overridden by js/viewport.js via visualViewport API */
  --dvh: 1dvh;
}

/* ---------- Typography ---------- */
:root {
  --font-display: 'Orbitron', 'Press Start 2P', 'VT323', monospace;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-pixel: 'Press Start 2P', 'VT323', 'Courier New', monospace;
  --font-body: 'VT323', 'Courier New', monospace;

  --text-xs: clamp(0.625rem, 1.5vw, 0.75rem);    /* ~10-12px */
  --text-sm: clamp(0.75rem, 2vw, 0.875rem);       /* ~12-14px */
  --text-base: clamp(0.875rem, 2.5vw, 1rem);      /* ~14-16px */
  --text-lg: clamp(1rem, 3vw, 1.25rem);            /* ~16-20px */
  --text-xl: clamp(1.125rem, 3.5vw, 1.5rem);       /* ~18-24px */
  --text-2xl: clamp(1.25rem, 4vw, 2rem);           /* ~20-32px */
  --text-3xl: clamp(1.5rem, 5vw, 2.5rem);          /* ~24-40px */
  --text-4xl: clamp(1.75rem, 6vw, 3.5rem);         /* ~28-56px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  --tracking-tight: 0.02em;
  --tracking-normal: 0.05em;
  --tracking-wide: 0.1em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.3em;
}

/* ---------- Font-face declarations ----------
   Actual font loading via Google Fonts <link> in HTML.
   These declarations provide fallback metrics for FOUT reduction. */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: local('Orbitron');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('JetBrains Mono');
}

/* ---------- Z-index scale ---------- */
:root {
  --z-bg: -10;
  --z-stars: -5;
  --z-orbitals: -3;
  --z-content: 1;
  --z-overlay: 100;
  --z-nav: 500;
  --z-hud: 900;
  --z-cursor-trail: 9998;
  --z-loading: 9998;
  --z-cursor: 10001;
  --z-noise: 9990;
}

/* ---------- Transition presets ---------- */
:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 0.1s;
  --duration-normal: 0.2s;
  --duration-slow: 0.4s;
  --duration-glacial: 0.8s;
}

/* ---------- Base palette (applied to :root, overridden by JS) ---------- */
:root {
  --bg: #0a0a0f;
  --bg-secondary: #1a1a2e;
  --accent: #fbbf24;
  --accent-secondary: #f97316;
  --text: #f8fafc;
  --text-muted: rgba(248, 250, 252, 0.7);

  /* Named color constants from original */
  --meteor-orange: #f97316;
  --deep-ember: #ef4444;
  --aurora-teal: #14b8a6;
  --cosmic-purple: #a855f7;
  --logo-blue: #b8dce8;
}

/* ---------- Color palettes ----------
   Original 6 palettes from CONFIG.palettes + extended set.
   All share the same dark background. */

/* Original palettes (from animations.js CONFIG) */
:root {
  --palette-gold-bg: #0a0a0f;
  --palette-gold-accent: #fbbf24;
  --palette-gold-text: #f8fafc;

  --palette-orange-bg: #0a0a0f;
  --palette-orange-accent: #f97316;
  --palette-orange-text: #fff7ed;

  --palette-ember-bg: #0a0a0f;
  --palette-ember-accent: #ef4444;
  --palette-ember-text: #fef2f2;

  --palette-teal-bg: #0a0a0f;
  --palette-teal-accent: #14b8a6;
  --palette-teal-text: #f0fdfa;

  --palette-purple-bg: #0a0a0f;
  --palette-purple-accent: #a855f7;
  --palette-purple-text: #faf5ff;

  --palette-logoblue-bg: #0a0a0f;
  --palette-logoblue-accent: #b8dce8;
  --palette-logoblue-text: #f0f9ff;

  /* Extended palettes */
  --palette-silver-bg: #0a0a0f;
  --palette-silver-accent: #94a3b8;
  --palette-silver-text: #f1f5f9;

  --palette-rose-bg: #0a0a0f;
  --palette-rose-accent: #f43f5e;
  --palette-rose-text: #fff1f2;

  --palette-electric-bg: #0a0a0f;
  --palette-electric-accent: #3b82f6;
  --palette-electric-text: #eff6ff;

  --palette-cosmic-bg: #0a0a0f;
  --palette-cosmic-accent: #8b5cf6;
  --palette-cosmic-text: #f5f3ff;

  --palette-void-bg: #0a0a0f;
  --palette-void-accent: #6366f1;
  --palette-void-text: #eef2ff;

  --palette-ice-bg: #0a0a0f;
  --palette-ice-accent: #67e8f9;
  --palette-ice-text: #ecfeff;

  --palette-neon-bg: #0a0a0f;
  --palette-neon-accent: #22d3ee;
  --palette-neon-text: #ecfeff;

  --palette-royal-bg: #0a0a0f;
  --palette-royal-accent: #7c3aed;
  --palette-royal-text: #f5f3ff;

  --palette-aurora-bg: #0a0a0f;
  --palette-aurora-accent: #34d399;
  --palette-aurora-text: #ecfdf5;

  --palette-midnight-bg: #0a0a0f;
  --palette-midnight-accent: #1e40af;
  --palette-midnight-text: #dbeafe;

  --palette-copper-bg: #0a0a0f;
  --palette-copper-accent: #d97706;
  --palette-copper-text: #fffbeb;

  --palette-jade-bg: #0a0a0f;
  --palette-jade-accent: #059669;
  --palette-jade-text: #ecfdf5;

  --palette-crimson-bg: #0a0a0f;
  --palette-crimson-accent: #dc2626;
  --palette-crimson-text: #fef2f2;

  --palette-ocean-bg: #0a0a0f;
  --palette-ocean-accent: #0284c7;
  --palette-ocean-text: #f0f9ff;

  --palette-sunset-bg: #0a0a0f;
  --palette-sunset-accent: #ea580c;
  --palette-sunset-text: #fff7ed;

  --palette-lavender-bg: #0a0a0f;
  --palette-lavender-accent: #c084fc;
  --palette-lavender-text: #faf5ff;

  --palette-forest-bg: #0a0a0f;
  --palette-forest-accent: #16a34a;
  --palette-forest-text: #f0fdf4;

  --palette-storm-bg: #0a0a0f;
  --palette-storm-accent: #475569;
  --palette-storm-text: #f1f5f9;

  --palette-cherry-bg: #0a0a0f;
  --palette-cherry-accent: #e11d48;
  --palette-cherry-text: #fff1f2;

  --palette-arctic-bg: #0a0a0f;
  --palette-arctic-accent: #a5f3fc;
  --palette-arctic-text: #ecfeff;

  --palette-bronze-bg: #0a0a0f;
  --palette-bronze-accent: #b45309;
  --palette-bronze-text: #fffbeb;

  --palette-amethyst-bg: #0a0a0f;
  --palette-amethyst-accent: #9333ea;
  --palette-amethyst-text: #faf5ff;

  --palette-rust-bg: #0a0a0f;
  --palette-rust-accent: #c2410c;
  --palette-rust-text: #fff7ed;

  --palette-sage-bg: #0a0a0f;
  --palette-sage-accent: #65a30d;
  --palette-sage-text: #f7fee7;

  --palette-coral-bg: #0a0a0f;
  --palette-coral-accent: #fb7185;
  --palette-coral-text: #fff1f2;

  --palette-slate-bg: #0a0a0f;
  --palette-slate-accent: #64748b;
  --palette-slate-text: #f1f5f9;

  --palette-wine-bg: #0a0a0f;
  --palette-wine-accent: #9f1239;
  --palette-wine-text: #fff1f2;

  --palette-marigold-bg: #0a0a0f;
  --palette-marigold-accent: #eab308;
  --palette-marigold-text: #fefce8;

  --palette-pearl-bg: #0a0a0f;
  --palette-pearl-accent: #e2e8f0;
  --palette-pearl-text: #f8fafc;

  --palette-indigo-bg: #0a0a0f;
  --palette-indigo-accent: #4f46e5;
  --palette-indigo-text: #eef2ff;

  --palette-scarlet-bg: #0a0a0f;
  --palette-scarlet-accent: #b91c1c;
  --palette-scarlet-text: #fef2f2;

  --palette-moss-bg: #0a0a0f;
  --palette-moss-accent: #4d7c0f;
  --palette-moss-text: #f7fee7;

  --palette-titanium-bg: #0a0a0f;
  --palette-titanium-accent: #94a3b8;
  --palette-titanium-text: #f1f5f9;

  --palette-ruby-bg: #0a0a0f;
  --palette-ruby-accent: #be123c;
  --palette-ruby-text: #fff1f2;

  --palette-sapphire-bg: #0a0a0f;
  --palette-sapphire-accent: #1d4ed8;
  --palette-sapphire-text: #dbeafe;

  --palette-topaz-bg: #0a0a0f;
  --palette-topaz-accent: #f59e0b;
  --palette-topaz-text: #fffbeb;

  --palette-obsidian-bg: #0a0a0f;
  --palette-obsidian-accent: #334155;
  --palette-obsidian-text: #e2e8f0;

  --palette-ivory-bg: #0a0a0f;
  --palette-ivory-accent: #fafaf9;
  --palette-ivory-text: #f8fafc;

  --palette-garnet-bg: #0a0a0f;
  --palette-garnet-accent: #991b1b;
  --palette-garnet-text: #fef2f2;

  --palette-cobalt-bg: #0a0a0f;
  --palette-cobalt-accent: #1e3a8a;
  --palette-cobalt-text: #dbeafe;

  --palette-thistle-bg: #0a0a0f;
  --palette-thistle-accent: #d8b4fe;
  --palette-thistle-text: #faf5ff;

  --palette-umber-bg: #0a0a0f;
  --palette-umber-accent: #92400e;
  --palette-umber-text: #fffbeb;

  --palette-verdigris-bg: #0a0a0f;
  --palette-verdigris-accent: #0d9488;
  --palette-verdigris-text: #f0fdfa;

  --palette-cinnabar-bg: #0a0a0f;
  --palette-cinnabar-accent: #dc2626;
  --palette-cinnabar-text: #fef2f2;

  --palette-lapis-bg: #0a0a0f;
  --palette-lapis-accent: #2563eb;
  --palette-lapis-text: #dbeafe;

  --palette-sienna-bg: #0a0a0f;
  --palette-sienna-accent: #a16207;
  --palette-sienna-text: #fffbeb;

  --palette-pewter-bg: #0a0a0f;
  --palette-pewter-accent: #78716c;
  --palette-pewter-text: #f5f5f4;

  --palette-malachite-bg: #0a0a0f;
  --palette-malachite-accent: #047857;
  --palette-malachite-text: #ecfdf5;

  --palette-carnelian-bg: #0a0a0f;
  --palette-carnelian-accent: #ea580c;
  --palette-carnelian-text: #fff7ed;
}