/* ============================================================
 * SongOS Design System — colors + type foundations
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Unbounded:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root,
[data-theme="stravinsky"] {
  /* ---------- CANVAS ---------- */
  --canvas:          #070710;  /* desktop base */
  --canvas-window:   #0c0c18;  /* window body */
  --canvas-tooltip:  rgba(15, 15, 28, 0.95);

  /* ---------- NEBULA (desktop background glows) ---------- */
  --nebula-violet:   rgba(109, 40, 217, 0.18);
  --nebula-magenta:  rgba(219, 39, 119, 0.14);
  --nebula-cyan:     rgba(6, 182, 212, 0.09);

  /* ---------- TEXT STACK ---------- */
  --fg-1:  #f1f5f9;   /* primary — titles, hero numbers */
  --fg-2:  #e2e8f0;   /* body */
  --fg-3:  #94a3b8;   /* secondary */
  --fg-4:  #64748b;   /* tertiary */
  --fg-5:  #475569;   /* micro labels */
  --fg-6:  #334155;   /* disabled / room tone */

  /* ---------- SURFACES (translucent white over canvas) ---------- */
  --surface-1:  rgba(255, 255, 255, 0.025);  /* track row resting */
  --surface-2:  rgba(255, 255, 255, 0.035);  /* card resting */
  --surface-3:  rgba(255, 255, 255, 0.055);  /* card hover / taskbar button */
  --surface-4:  rgba(255, 255, 255, 0.08);   /* divider / pressed */

  /* Named inner-surfaces (decoupled from canvas-window via the controls panel).
     Set to `var(--canvas-window)` to LOCK the surface to the window background,
     or to a standalone color to decouple. */
  --surface-card: rgba(255, 255, 255, 0.035);   /* stat / campaign / kanban cards */
  --surface-row:  rgba(255, 255, 255, 0.025);   /* tight list rows */

  --border-hairline:  rgba(255, 255, 255, 0.055);
  --border-soft:      rgba(255, 255, 255, 0.07);
  --border-strong:    rgba(255, 255, 255, 0.1);

  /* ---------- ACCENT PALETTE ---------- */
  /* Violet — primary brand accent */
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #4338ca;

  /* Magenta / rose — secondary */
  --magenta-400: #f472b6;
  --magenta-500: #ec4899;
  --magenta-600: #be185d;
  --magenta-700: #9d174d;

  /* Cyan — tertiary */
  --cyan-300:   #67e8f9;
  --cyan-400:   #22d3ee;
  --cyan-500:   #06b6d4;
  --cyan-600:   #0e7490;
  --cyan-700:   #0369a1;

  /* Semantic status */
  --green-400:  #34d399;   /* live / up / success */
  --amber-400:  #fbbf24;   /* soon / warn */
  --red-400:    #f87171;   /* down / destructive */
  --indigo-400: #818cf8;   /* accent highlight */

  /* ---------- PALETTE — primary + lighter ---------- *
   * Two semantic accents that drive app icon tints, brand, and CTAs.
   * Individual --grad-* tokens still exist for per-app customization.
   */
  --accent-primary: #7c3aed;   /* primary brand color */
  --accent-lighter: #a78bfa;   /* softer variant */

  /* Keep the palette controls functional: the Pulse gradient + brand
     gradient track the two palette tokens so moving them is visible. */
  --grad-pulse:     linear-gradient(135deg, var(--accent-primary), var(--accent-lighter));
  --grad-brand:     linear-gradient(135deg, var(--accent-lighter) 0%, #f472b6 100%);
  --grad-primary:   linear-gradient(135deg, var(--accent-primary), var(--accent-lighter));

  /* Platform brand */
  --spotify:   #1db954;
  --apple:     #fc3c44;
  --tiktok:    #ff0050;
  --youtube:   #f93e3e;
  --instagram: #ec4899;

  /* ---------- APP GRADIENTS (identity per app) ---------- */
  /* --grad-pulse, --grad-brand, --grad-primary are declared above and
     track --accent-primary / --accent-lighter so the palette controls
     in the drawer cause live retinting. */
  --grad-drops:     linear-gradient(135deg, #be185d, #9d174d);
  --grad-pitch:     linear-gradient(135deg, #0e7490, #0369a1);
  --grad-campaigns: linear-gradient(135deg, #b45309, #92400e);
  --grad-revenue:   linear-gradient(135deg, #065f46, #047857);
  --grad-presskit:  linear-gradient(135deg, #7c3aed, #6d28d9);
  --grad-socials:   linear-gradient(135deg, #be123c, #9f1239);
  --grad-hero:      linear-gradient(135deg, #34d399, #06b6d4);

  /* ---------- SPACING (2px base) ---------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 18px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-14: 28px;
  --sp-16: 32px;

  /* ---------- RADII ---------- */
  --r-xs:   5px;
  --r-sm:   6px;
  --r-md:   7px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-2xl:  12px;
  --r-tile: 13px;  /* app icon tiles — intentionally in-between */
  --r-pill: 20px;

  /* ---------- SHADOWS ---------- */
  --shadow-window: 0 32px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.055);
  --shadow-card:   0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-drag:   0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-btn-primary: 0 4px 12px rgba(124, 58, 237, 0.3);
  --shadow-btn-play:    0 4px 10px rgba(124, 58, 237, 0.4);

  /* ---------- BLUR ---------- */
  --blur-taskbar: blur(24px) saturate(1.4);
  --blur-tooltip: blur(12px);

  /* ---------- TRANSITIONS ---------- */
  --t-fast:   0.14s ease;
  --t-base:   0.18s ease;
  --t-slow:   0.3s ease;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Unbounded', 'Montserrat', system-ui, sans-serif;
  --font-ui:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SIZES ---------- */
  --t-micro:  9px;   /* SECTION LABELS (uppercase) */
  --t-tiny:   10px;  /* card meta, status badges */
  --t-xs:     11px;  /* taskbar, buttons, table cells */
  --t-sm:     12px;  /* card titles, track names */
  --t-base:   13px;  /* app body */
  --t-md:     15px;  /* app title */
  --t-lg:     17px;  /* press-kit name */
  --t-xl:     21px;  /* stat value */
  --t-2xl:    30px;
  --t-3xl:    38px;  /* revenue hero */
  --t-4xl:    56px;

  /* ---------- TYPE WEIGHTS ---------- */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;
  --w-display:  900;

  /* ---------- LETTER-SPACING ---------- */
  --ls-display: -0.04em;
  --ls-hero:    -0.03em;
  --ls-title:   -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.06em;
  --ls-label:   0.1em;
  --ls-section: 0.12em;
  --ls-brand:   0.14em;

  /* ============================================================
   * OS-UI tokens — chrome, windows, taskbar, dock
   * The OS layer is the admin / power-user surface.
   * ============================================================ */
  --os-canvas:           var(--canvas);
  --os-window:           var(--canvas-window);
  --os-tooltip:          var(--canvas-tooltip);
  --os-fg-1:             var(--fg-1);
  --os-fg-2:             var(--fg-2);
  --os-fg-3:             var(--fg-3);
  --os-fg-4:             var(--fg-4);
  --os-fg-5:             var(--fg-5);
  --os-border-hairline:  var(--border-hairline);
  --os-border-soft:      var(--border-soft);
  --os-border-strong:    var(--border-strong);
  --os-accent:           var(--accent-primary);
  --os-accent-2:         var(--accent-lighter);
  --os-font-display:     var(--font-display);
  --os-font-ui:          var(--font-ui);
  --os-font-mono:        var(--font-mono);
  --os-radius-window:    var(--r-2xl);
  --os-radius-tile:      var(--r-tile);
  --os-blur:             var(--blur-taskbar);
  --os-shadow-window:    var(--shadow-window);

  /* ============================================================
   * GUI / User-UI tokens — cards, buttons, forms, content surfaces
   * Defaults inherit from OS-UI. Override to diverge per-app.
   * ============================================================ */
  /* Surfaces (page → card → row → input) */
  --gui-bg:              var(--os-canvas);            /* page background */
  --gui-surface:         var(--os-window);            /* primary content surface */
  --gui-surface-2:       var(--surface-2);            /* card on top of surface */
  --gui-surface-3:       var(--surface-3);            /* hover / pressed */
  --gui-border:          var(--os-border-hairline);
  --gui-border-strong:   var(--os-border-strong);

  /* Text */
  --gui-fg:              var(--os-fg-1);              /* primary content */
  --gui-fg-muted:        var(--os-fg-3);              /* secondary */
  --gui-fg-subtle:       var(--os-fg-5);              /* labels / captions */

  /* Brand / semantic */
  --gui-accent:          var(--os-accent);            /* primary CTA */
  --gui-accent-fg:       #ffffff;                     /* text on accent */
  --gui-accent-2:        var(--os-accent-2);
  --gui-success:         var(--green-400);
  --gui-warn:            var(--amber-400);
  --gui-danger:          var(--red-400);

  /* Type */
  --gui-font-display:    var(--os-font-display);
  --gui-font-ui:         var(--os-font-ui);
  --gui-font-mono:       var(--os-font-mono);

  /* Density — live values are routed through --gui-density-* below.
     Switch via [data-gui-density="comfortable|spacious|mobile"] on :root. */
  --gui-text-body:       13px;
  --gui-text-label:      11px;
  --gui-text-h:          17px;
  --gui-pad-card:        12px;
  --gui-pad-button-y:    8px;
  --gui-pad-button-x:    12px;
  --gui-pad-input-y:     8px;
  --gui-pad-input-x:     10px;
  --gui-gap:             10px;
  --gui-row-h:           36px;

  /* Geometry */
  --gui-radius:          var(--r-lg);                 /* default card / button */
  --gui-radius-sm:       var(--r-sm);
  --gui-radius-lg:       var(--r-xl);
  --gui-radius-pill:     var(--r-pill);

  /* Elevation */
  --gui-shadow-1:        0 1px 2px rgba(0,0,0,0.18);
  --gui-shadow-2:        0 4px 14px rgba(0,0,0,0.28);
  --gui-shadow-3:        0 12px 32px rgba(0,0,0,0.45);

  /* Component-specific (computed from above by default) */
  --gui-button-primary-bg:    var(--gui-accent);
  --gui-button-primary-fg:    var(--gui-accent-fg);
  --gui-button-secondary-bg:  var(--gui-surface-2);
  --gui-button-secondary-fg:  var(--gui-fg);
  --gui-button-ghost-fg:      var(--gui-fg-muted);
  --gui-button-danger-bg:     var(--gui-danger);
  --gui-button-danger-fg:     #ffffff;
  --gui-card-bg:              var(--gui-surface);
  --gui-card-border:          var(--gui-border);
  --gui-input-bg:             var(--gui-surface-2);
  --gui-input-border:         var(--gui-border);
  --gui-tab-bg:               transparent;
  --gui-tab-active-bg:        var(--gui-surface-2);
  --gui-tab-active-fg:        var(--gui-fg);
  --gui-nav-bg:               var(--gui-surface);
  --gui-nav-item-active-bg:   var(--gui-surface-2);
}

/* ---------- Density modes ---------- */
[data-gui-density="comfortable"] {
  --gui-text-body: 15px;
  --gui-text-label: 13px;
  --gui-text-h: 20px;
  --gui-pad-card: 16px;
  --gui-pad-button-y: 10px;
  --gui-pad-button-x: 16px;
  --gui-pad-input-y: 10px;
  --gui-pad-input-x: 12px;
  --gui-gap: 14px;
  --gui-row-h: 44px;
}
[data-gui-density="spacious"] {
  --gui-text-body: 17px;
  --gui-text-label: 14px;
  --gui-text-h: 24px;
  --gui-pad-card: 22px;
  --gui-pad-button-y: 14px;
  --gui-pad-button-x: 22px;
  --gui-pad-input-y: 12px;
  --gui-pad-input-x: 14px;
  --gui-gap: 18px;
  --gui-row-h: 52px;
}
[data-gui-density="mobile"] {
  --gui-text-body: 16px;
  --gui-text-label: 13px;
  --gui-text-h: 22px;
  --gui-pad-card: 18px;
  --gui-pad-button-y: 14px;
  --gui-pad-button-x: 20px;
  --gui-pad-input-y: 14px;
  --gui-pad-input-x: 14px;
  --gui-gap: 16px;
  --gui-row-h: 48px;
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES
 * ============================================================ */

body {
  font-family: var(--font-ui);
  font-size: var(--t-base);
  color: var(--fg-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  line-height: 1;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: var(--w-black);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  line-height: 1;
}

h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--t-lg);
  font-weight: var(--w-black);
  letter-spacing: var(--ls-title);
  color: var(--fg-1);
  line-height: 1.2;
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  line-height: 1.3;
}

h5, .h5 {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--fg-2);
  line-height: 1.4;
}

p, .body {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  color: var(--fg-3);
  line-height: 1.65;
}

.hero-number {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-display);
  line-height: 1;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-black);
  letter-spacing: var(--ls-hero);
  color: var(--fg-1);
  line-height: 1;
}

.section-label {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-section);
  color: var(--fg-5);
}

.app-title {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.app-sub {
  font-family: var(--font-ui);
  font-size: var(--t-tiny);
  font-weight: var(--w-regular);
  color: var(--fg-5);
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: var(--w-black);
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

code, .mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-tiny);
  color: var(--fg-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.badge-live  { background: rgba(52,211,153,.13); color: var(--green-400);  border: 1px solid rgba(52,211,153,.2); }
.badge-soon  { background: rgba(251,191,36,.13); color: var(--amber-400);  border: 1px solid rgba(251,191,36,.2); }
.badge-draft { background: rgba(100,116,139,.13); color: var(--fg-3);      border: 1px solid rgba(100,116,139,.2); }
.badge-done  { background: rgba(124,58,237,.13); color: var(--violet-400); border: 1px solid rgba(124,58,237,.2); }

/* Scrollbars — thin, almost-invisible */
.songos-scroll::-webkit-scrollbar,
.songos * ::-webkit-scrollbar { width: 3px; height: 3px; }
.songos-scroll::-webkit-scrollbar-track,
.songos * ::-webkit-scrollbar-track { background: transparent; }
.songos-scroll::-webkit-scrollbar-thumb,
.songos * ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 2px; }
.songos-scroll::-webkit-scrollbar-thumb:hover,
.songos * ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }

/* ============================================================
 * IfSoDreams LOCAL ADDITIONS
 * Per-app gradient identities for the IfSoDreams app lineup.
 * These live alongside the SongOS --grad-* block above.
 * ============================================================ */
:root {
  --grad-projects:  linear-gradient(135deg, #6d28d9, #4338ca);   /* violet → indigo */
  --grad-ideas:     linear-gradient(135deg, #0e7490, #0369a1);   /* teal → blue */
  --grad-dreams:    linear-gradient(135deg, #7c3aed, #be185d);   /* violet → rose */
  --grad-now:       linear-gradient(135deg, #b45309, #92400e);   /* amber → bronze */
  --grad-inbox:     linear-gradient(135deg, #06b6d4, #0369a1);   /* cyan → blue */
}

/* IfSoDreams — Brainstorm + Architecture additions */
:root {
  --grad-brainstorm:   linear-gradient(135deg, #9d174d, #4338ca);   /* rose → indigo */
  --grad-architecture: linear-gradient(135deg, #065f46, #0e7490);   /* emerald → teal */
}