/* ============================================================
   AstroDesk — Design System
   "Celestial Professional": refined orange accent, cosmic accents,
   data-dense but calm. Light + Dark via [data-theme].
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Accent — orange (default). Overridable via [data-accent]. */
  --accent: #FF8A00;
  --accent-600: #e07600;
  --accent-700: #e07600;
  --accent-soft: rgba(255,138,0,.15);
  --accent-softer: rgba(255,138,0,.08);
  --on-accent: #ffffff;

  /* Status */
  --green: #1f9d6b;
  --green-soft: rgba(31, 157, 107, 0.13);
  --amber: #d9912b;
  --amber-soft: rgba(217, 145, 43, 0.14);
  --red: #db5151;
  --red-soft: rgba(219, 81, 81, 0.13);
  --blue: #3b7fd9;
  --blue-soft: rgba(59, 127, 217, 0.13);
  --gold: #c79a3a;

  /* Typography */
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-num: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;

  /* Radius */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Spacing base */
  --sp: 4px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Density (overridden by [data-density]) */
  --row-h: 52px;
  --pad-card: 22px;
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg: #f4f3f9;
  --bg-grad: radial-gradient(1200px 700px at 88% -10%, rgba(255,138,0,0.08), transparent 60%),
             radial-gradient(900px 600px at -5% 110%, rgba(255,138,0,0.06), transparent 55%);
  --surface: #ffffff;
  --surface-2: #faf9fe;
  --surface-3: #f1f0f8;
  --border: #e7e5f0;
  --border-strong: #d8d5e6;
  --text: #1b1830;
  --text-muted: #6a6680;
  --text-faint: #9c98ad;
  --shadow-sm: 0 1px 2px rgba(27,24,48,0.06), 0 1px 3px rgba(27,24,48,0.05);
  --shadow-md: 0 4px 16px rgba(27,24,48,0.08), 0 1px 4px rgba(27,24,48,0.05);
  --shadow-lg: 0 18px 50px rgba(27,24,48,0.16), 0 6px 18px rgba(27,24,48,0.10);
  --sidebar-bg: #ffffff;
  --sidebar-border: #ece9f5;
  --scrim: rgba(27,24,48,0.42);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg: #0c0b16;
  --bg-grad: radial-gradient(1200px 720px at 86% -12%, rgba(255,138,0,0.18), transparent 60%),
             radial-gradient(900px 620px at -6% 112%, rgba(255,138,0,0.10), transparent 55%);
  --surface: #16142a;
  --surface-2: #1c1a33;
  --surface-3: #25224080;
  --border: #2a2746;
  --border-strong: #38345b;
  --text: #ecebf5;
  --text-muted: #a4a1c0;
  --text-faint: #6f6c90;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --sidebar-bg: #110f20;
  --sidebar-border: #221f3c;
  --scrim: rgba(6,5,14,0.66);
  --accent-soft: rgba(255,138,0,.20);
  --accent-softer: rgba(255,138,0,.12);
  --accent: #FF9A1A;
  --accent-600: #e07600;
}

/* ---------- Accent variants ---------- */
[data-accent="violet"]  { --accent:#6C4ED9; --accent-600:#5b3fc4; --accent-700:#4a32a8; --accent-soft:rgba(108,78,217,.12); --accent-softer:rgba(108,78,217,.07); }
[data-accent="indigo"]  { --accent:#4f63d9; --accent-600:#3f52c4; --accent-700:#3343a8; --accent-soft:rgba(79,99,217,.13); --accent-softer:rgba(79,99,217,.07); }
[data-accent="emerald"] { --accent:#1f9d6b; --accent-600:#188559; --accent-700:#136e4a; --accent-soft:rgba(31,157,107,.13); --accent-softer:rgba(31,157,107,.07); }
[data-accent="amber"]   { --accent:#cc8a2a; --accent-600:#b3771f; --accent-700:#946218; --accent-soft:rgba(204,138,42,.14); --accent-softer:rgba(204,138,42,.07); --on-accent:#fff;}
[data-accent="rose"]    { --accent:#d8527c; --accent-600:#c2406a; --accent-700:#a23457; --accent-soft:rgba(216,82,124,.13); --accent-softer:rgba(216,82,124,.07); }

/* ---------- Density ---------- */
[data-density="compact"]  { --row-h: 42px; --pad-card: 16px; }
[data-density="regular"]  { --row-h: 52px; --pad-card: 22px; }
[data-density="comfy"]    { --row-h: 62px; --pad-card: 28px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

::selection { background: var(--accent-soft); color: var(--text); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* number/figure helper */
.tnum { font-variant-numeric: tabular-nums; font-family: var(--font-num); }

/* utility text */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

@keyframes floatUp { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:none;} }
@keyframes fadeIn { from { opacity: 0;} to {opacity:1;} }
@keyframes scaleIn { from { opacity:0; transform: translateY(8px) scale(.985);} to {opacity:1; transform:none;} }
@keyframes twinkle { 0%,100%{opacity:.25;} 50%{opacity:1;} }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}