/* ──────────────────────────────────────────────────────────────────────
   SOLARI v2 — tokens
   ----------------------------------------------------------------------
   Dark-first. Dense. Editorial.
   The aesthetic: marketing terminal. Bloomberg + Linear + Stripe Atlas.
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ─── Fonts ───────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  /* ─── DARK (default) — near-black with cool undertone ──
     Step is ~3–4% lightness, deliberate. Layered hierarchy.
     No #000 ever — gives banding & looks cheap. */
  --bg-0:      #08090C;  /* page void */
  --bg-1:      #0E1014;  /* nav rail */
  --bg-2:      #14171D;  /* cards / main surface */
  --bg-3:      #1B1F27;  /* inputs, raised */
  --bg-4:      #252A35;  /* hover state, dropdowns */
  --bg-5:      #2F3441;  /* selected, focus */

  /* Text — warm-tinted whites at descending alpha */
  --fg-1:      #E8E9EA;
  --fg-2:      rgba(232,233,234,0.68);
  --fg-3:      rgba(232,233,234,0.46);
  --fg-4:      rgba(232,233,234,0.28);
  --fg-5:      rgba(232,233,234,0.16);

  /* Borders — top-light & bottom-dark for inset effect at edges */
  --bd-1:      rgba(255,255,255,0.06);
  --bd-2:      rgba(255,255,255,0.10);
  --bd-3:      rgba(255,255,255,0.16);
  --bd-focus:  rgba(245,200,66,0.40);

  /* ─── Sol — kept, but used surgically ───────────────
     Yellow is RESERVED for: AI-initiated suggestions, the Sol mark,
     primary CTA. Never used as a decorative brand wash. */
  --sol:       #F5C842;
  --sol-glow:  #FFE187;
  --sol-deep:  #C49A2A;
  --sol-08:    rgba(245,200,66,0.08);
  --sol-15:    rgba(245,200,66,0.15);
  --sol-25:    rgba(245,200,66,0.25);
  --on-sol:    #18170F;

  /* ─── Data-viz palette ──────────────────────────────
     Used for charts and platform identity. Tuned for dark bg. */
  --data-meta:    #4F8DF4;
  --data-google:  #E7625F;
  --data-tiktok:  #54E6C8;
  --data-organic: #B98AF8;

  /* ─── Status ────────────────────────────────────────
     Muted, low-saturation. Background tints at 12–15% alpha. */
  --ok:        #4ADE80;
  --ok-bg:     rgba(74,222,128,0.10);
  --warn:      #FBBF24;
  --warn-bg:   rgba(251,191,36,0.10);
  --err:       #F87171;
  --err-bg:    rgba(248,113,113,0.10);
  --info:      #60A5FA;
  --info-bg:   rgba(96,165,250,0.10);

  /* ─── Radius — flatter than v1, more "command surface" feel ─ */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 18px;

  /* ─── Spacing (4px base) ──────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ─── Density — compact by default; toggled via tweaks ──── */
  --row-h:        32px;   /* table row */
  --row-h-tight:  26px;
  --nav-h:        32px;   /* nav item */
  --field-h:      30px;   /* inputs */
  --tab-h:        34px;
  --pad-card:     16px;
  --pad-cell:     10px;

  /* ─── Shadow — minimal; ambient float only ──────── */
  --sh-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 10px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --sh-pop: 0 24px 60px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.05) inset;

  /* ─── App chrome heights ──────────────────────────── */
  --h-topbar: 44px;
  --h-tabs:   38px;
  --h-status: 26px;
  --w-rail:   52px;
  --w-nav:    220px;
  --w-inspector: 340px;
}

/* ─── LIGHT variant — paper, not "AI cream". Stripe Atlas density. */
[data-theme="light"] {
  --bg-0:      #F7F7F5;
  --bg-1:      #FFFFFF;
  --bg-2:      #FFFFFF;
  --bg-3:      #F2F2EF;
  --bg-4:      #E8E8E3;
  --bg-5:      #DDDDD6;

  --fg-1:      #0F1014;
  --fg-2:      rgba(15,16,20,0.70);
  --fg-3:      rgba(15,16,20,0.48);
  --fg-4:      rgba(15,16,20,0.30);
  --fg-5:      rgba(15,16,20,0.16);

  --bd-1:      rgba(15,16,20,0.06);
  --bd-2:      rgba(15,16,20,0.10);
  --bd-3:      rgba(15,16,20,0.18);

  --sh-1: 0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(15,16,20,0.05);
  --sh-2: 0 8px 24px rgba(15,16,20,0.06);
  --sh-pop: 0 20px 50px rgba(15,16,20,0.12);
}

/* ─── Density: comfortable (toggled via tweaks) ──── */
[data-density="comfortable"] {
  --row-h:        40px;
  --nav-h:        38px;
  --field-h:      36px;
  --tab-h:        40px;
  --pad-card:     20px;
  --pad-cell:     14px;
}

/* ─── Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg-0); }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}

/* ─── Selection ─────────────────────────────────────── */
::selection { background: var(--sol-25); color: var(--fg-1); }

/* ─── Scrollbars — slim, themed ───────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--bd-3); border: 3px solid transparent; background-clip: content-box; }