/* ShreeFusion — Base Design System
   Defines CSS variables, dark/light modes, and component styles.
   Theme files override --color-primary/secondary/accent only. */

:root {
  --color-primary: #1DB954;
  --color-secondary: #191414;
  --color-accent: #FFFFFF;

  --color-bg: #FFFFFF;
  --color-surface: #F7F7F8;
  --color-surface-2: #FFFFFF;
  --color-text: #0B0B0F;
  --color-text-muted: #5B6472;
  --color-border: #E6E8EC;
  --color-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.15);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
  --color-bg: #0B0B0F;
  --color-surface: #121218;
  --color-surface-2: #17171F;
  --color-text: #F5F7FA;
  --color-text-muted: #9AA3B2;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

/* Spotify theme uses near-black in dark for authentic feel */
html.theme-spotify[data-theme="dark"] { --color-bg: #121212; --color-surface: #181818; --color-surface-2: #1F1F1F; }
html.theme-black[data-theme="dark"]   { --color-bg: #000000; --color-surface: #0B0B0B; --color-surface-2: #131313; }
html.theme-red[data-theme="dark"]     { --color-bg: #1A0A0A; --color-surface: #22100F; --color-surface-2: #2A1615; }
html.theme-purple[data-theme="dark"]  { --color-bg: #0B0B1A; --color-surface: #13132A; --color-surface-2: #1B1B3A; }
html.theme-blue[data-theme="dark"]    { --color-bg: #0F172A; --color-surface: #16213E; --color-surface-2: #1B2A4E; }
html.theme-gold[data-theme="dark"]    { --color-bg: #0F172A; --color-surface: #14203A; --color-surface-2: #1A2846; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-display);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Utility overrides that plug into Tailwind CDN */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-surface { background-color: var(--color-surface) !important; }
.bg-surface-2 { background-color: var(--color-surface-2) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.border-token { border-color: var(--color-border) !important; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s; border: 1px solid transparent; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { box-shadow: 0 12px 30px -10px color-mix(in oklab, var(--color-primary) 60%, transparent); }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-surface); }
.btn-ghost { background: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface); }

/* Card / surface */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card-elevated { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--color-shadow); }

/* Input */
.input { width: 100%; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .8rem 1rem; font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 20%, transparent); }
label.field-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Nav */
.sf-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in oklab, var(--color-bg) 78%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.sf-nav.scrolled { border-color: var(--color-border); background: color-mix(in oklab, var(--color-bg) 92%, transparent); }
.sf-nav a.nav-link { color: var(--color-text-muted); font-weight: 500; font-size: .92rem; padding: .5rem .75rem; border-radius: 8px; }
.sf-nav a.nav-link:hover { color: var(--color-text); background: var(--color-surface); }
.sf-nav a.nav-link.active { color: var(--color-text); }

/* Logo mark */
.sf-logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.sf-logo .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 40%, #fff)); display: grid; place-items: center; color: #fff; font-weight: 900; box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--color-primary) 60%, transparent); }

/* Theme dropdown */
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .5rem; min-width: 220px; box-shadow: var(--color-shadow); display: none; z-index: 60; }
.theme-menu.open { display: block; }
.theme-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.theme-item:hover { background: var(--color-surface); }
.theme-item .swatches { display: flex; gap: 4px; }
.theme-item .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--color-border); }
.theme-item.active { background: var(--color-surface); font-weight: 600; }

/* Footer */
.sf-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }

/* Hero gradient */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; }

/* Chip / badge */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: color-mix(in oklab, var(--color-primary) 15%, transparent); color: var(--color-primary); border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent); }
.chip-muted { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); }

/* Section headers */
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--color-primary); }
h1, h2, h3, h4 { color: var(--color-text); letter-spacing: -0.02em; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.25rem; }
p { color: var(--color-text-muted); }

/* Marquee (platforms) */
.marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; animation: scroll 30s linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Accordion */
.acc-item { border-bottom: 1px solid var(--color-border); }
.acc-btn { width: 100%; text-align: left; padding: 1.1rem 0; display: flex; justify-content: space-between; align-items: center; font-weight: 600; background: transparent; border: 0; color: var(--color-text); font-size: 1rem; cursor: pointer; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-panel .inner { padding-bottom: 1.1rem; color: var(--color-text-muted); }
.acc-item.open .acc-panel { max-height: 300px; }
.acc-item.open .acc-btn i { transform: rotate(45deg); }
.acc-btn i { transition: transform .2s; }

/* Dashboard sidebar */
.dash-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .dash-shell { grid-template-columns: 1fr; } .dash-sidebar { display: none; } }
.dash-sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.dash-sidebar a { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 10px; color: var(--color-text-muted); font-size: .9rem; font-weight: 500; }
.dash-sidebar a:hover { background: var(--color-surface-2); color: var(--color-text); }
.dash-sidebar a.active { background: color-mix(in oklab, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.dash-sidebar .sg-label { padding: 1rem .75rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); }

.dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-bg) 90%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }

/* Stat card */
.stat { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.stat .val { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin-top: .3rem; }
.stat .lbl { font-size: .78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Table */
.sf-table { width: 100%; border-collapse: collapse; }
.sf-table th, .sf-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.sf-table th { font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

/* Toggle */
.switch { position: relative; width: 44px; height: 24px; background: var(--color-border); border-radius: 999px; cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.switch.on { background: var(--color-primary); }
.switch.on::after { transform: translateX(20px); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }