/**
 * Soniv design tokens — orange + cyan + violet (logo-aligned).
 * Dark is default; .theme-light on html/body switches the palette.
 */

:root,
:root.theme-dark {
  color-scheme: dark;

  /* Brand core */
  --soniv-orange: #ff6b1a;
  --soniv-orange-deep: #e85d10;
  --soniv-orange-soft: #ff8c42;
  --soniv-cyan: #00d4ee;
  --soniv-cyan-deep: #00a8c4;
  --soniv-violet: #a855f7;
  --soniv-violet-deep: #7c3aed;

  /* Semantic surfaces */
  --color-bg: #080a0f;
  --color-surface: #0d1117;
  --color-surface-soft: #111827;
  --color-surface-elevated: #151b28;
  --color-card: rgba(255, 255, 255, 0.04);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-text: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-muted: #94a3b8;
  --color-link: #e2e8f0;
  --color-on-accent: #0a0a0a;
  --color-accent: var(--soniv-orange);
  --color-accent-soft: rgba(255, 107, 26, 0.15);
  --color-accent-cyan: var(--soniv-cyan);
  --color-accent-violet: var(--soniv-violet);
  --color-input: rgba(255, 255, 255, 0.06);
  --color-input-border: rgba(255, 255, 255, 0.12);
  --color-focus-ring: rgba(0, 212, 238, 0.45);

  /* Nav & chrome */
  --nav-bg: rgba(8, 10, 15, 0.92);
  --nav-border: rgba(255, 255, 255, 0.06);
  --nav-link: rgba(255, 255, 255, 0.68);
  --nav-link-hover: #ffffff;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.08);
  --mobile-menu-bg: rgba(11, 15, 23, 0.98);

  /* Hero & atmosphere */
  --hero-base: #080a0f;
  --hero-glow-violet: rgba(168, 85, 247, 0.28);
  --hero-glow-cyan: rgba(0, 212, 238, 0.14);
  --hero-glow-orange: rgba(255, 107, 26, 0.12);
  --concert-violet: rgba(168, 85, 247, 0.55);
  --concert-cyan: rgba(0, 212, 238, 0.45);
  --concert-orange: rgba(255, 107, 26, 0.45);
  --concert-white: rgba(255, 255, 255, 0.18);

  /* Buttons */
  --btn-primary-gradient: linear-gradient(135deg, var(--soniv-orange), var(--soniv-orange-deep));
  --btn-primary-text: #0a0a0a;
  --btn-primary-shadow: 0 0 20px rgba(255, 107, 26, 0.45), 0 4px 14px rgba(255, 107, 26, 0.28);
  --btn-primary-shadow-hover: 0 0 32px rgba(255, 107, 26, 0.55), 0 6px 22px rgba(255, 107, 26, 0.35);
  --btn-ghost-bg: rgba(255, 255, 255, 0.04);
  --btn-ghost-border: rgba(255, 255, 255, 0.14);
  --btn-ghost-text: var(--color-text);
  --btn-ghost-hover-border: rgba(0, 212, 238, 0.48);
  --btn-ghost-hover-bg: rgba(0, 212, 238, 0.08);
  --btn-secondary-text: var(--color-text);

  /* Cards & panels */
  --card-gradient: linear-gradient(145deg, #0d1117, #111520);
  --card-gradient-alt: linear-gradient(145deg, #0d1117, #0f1520);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-hover-border: rgba(0, 212, 238, 0.32);
  --card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 28px rgba(0, 212, 238, 0.1);

  /* Accents & misc */
  --glow-line: linear-gradient(to right, transparent, rgba(0, 212, 238, 0.5), rgba(168, 85, 247, 0.5), transparent);
  --scrollbar-track: var(--color-bg);
  --scrollbar-thumb: rgba(255, 107, 26, 0.42);
  --notif-icon: var(--soniv-cyan);
  --footer-bg: #05070c;
  --footer-text: #94a3b8;
  --help-panel-bg: rgba(8, 10, 15, 0.98);
}

:root.theme-light {
  color-scheme: light;

  --color-bg: #f0f4fa;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fafc;
  --color-surface-elevated: #ffffff;
  --color-card: rgba(15, 23, 42, 0.04);
  --color-border: rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.18);
  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-muted: #475569;
  --color-link: #0f172a;
  --color-on-accent: #0a0a0a;
  --color-accent: #9a3412;
  --color-accent-soft: rgba(234, 88, 12, 0.12);
  --color-accent-cyan: #0e7490;
  --color-accent-violet: #7c3aed;
  --color-input: rgba(15, 23, 42, 0.04);
  --color-input-border: rgba(15, 23, 42, 0.14);
  --color-focus-ring: rgba(8, 145, 178, 0.35);

  --nav-bg: rgba(255, 255, 255, 0.94);
  --nav-border: rgba(15, 23, 42, 0.08);
  --nav-link: #475569;
  --nav-link-hover: #0f172a;
  --nav-link-hover-bg: rgba(15, 23, 42, 0.06);
  --mobile-menu-bg: rgba(255, 255, 255, 0.98);

  --hero-base: #f0f4fa;
  --hero-glow-violet: rgba(124, 58, 237, 0.14);
  --hero-glow-cyan: rgba(8, 145, 178, 0.12);
  --hero-glow-orange: rgba(234, 88, 12, 0.1);
  --concert-violet: rgba(124, 58, 237, 0.22);
  --concert-cyan: rgba(8, 145, 178, 0.2);
  --concert-orange: rgba(234, 88, 12, 0.2);
  --concert-white: rgba(15, 23, 42, 0.06);

  --btn-primary-gradient: linear-gradient(135deg, #ff6b1a, #e85d10);
  --btn-primary-text: #0a0a0a;
  --btn-primary-shadow: 0 4px 16px rgba(255, 107, 26, 0.28);
  --btn-primary-shadow-hover: 0 6px 22px rgba(255, 107, 26, 0.38);
  --btn-ghost-bg: rgba(15, 23, 42, 0.04);
  --btn-ghost-border: rgba(15, 23, 42, 0.12);
  --btn-ghost-text: var(--color-text);
  --btn-ghost-hover-border: rgba(8, 145, 178, 0.45);
  --btn-ghost-hover-bg: rgba(8, 145, 178, 0.08);
  --btn-secondary-text: var(--color-text);

  --card-gradient: linear-gradient(145deg, #ffffff, #f8fafc);
  --card-gradient-alt: linear-gradient(145deg, #ffffff, #f1f5f9);
  --card-border: rgba(15, 23, 42, 0.1);
  --card-hover-border: rgba(8, 145, 178, 0.35);
  --card-shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.08), 0 0 24px rgba(8, 145, 178, 0.08);

  --glow-line: linear-gradient(to right, transparent, rgba(8, 145, 178, 0.35), rgba(124, 58, 237, 0.35), transparent);
  --scrollbar-track: #f0f4fa;
  --scrollbar-thumb: rgba(234, 88, 12, 0.35);
  --notif-icon: var(--color-accent-cyan);
  --footer-bg: #e8edf5;
  --footer-text: #475569;
  --help-panel-bg: rgba(255, 255, 255, 0.98);
}