/* ==========================================================================
   LIGHT UP OS — Design Tokens
   Minimal, luxury, calm. White / Charcoal / Black / Light Gray.
   ========================================================================== */

:root{
  /* ---- Core palette (Light) ---- */
  --c-white:#ffffff;
  --c-black:#111111;
  --c-charcoal:#1c1c1e;

  /* ---- Surfaces ---- */
  --bg:#fbfbfa;
  --surface:#ffffff;
  --surface-2:#f5f5f4;
  --surface-hover:#efefee;
  --border:#e8e7e4;
  --border-strong:#dcdbd7;

  /* ---- Text ---- */
  --text-primary:#111111;
  --text-secondary:#6b6b6f;
  --text-tertiary:#9a9a9e;
  --text-inverse:#ffffff;

  /* ---- Accent (monochrome) ---- */
  --accent:#111111;
  --accent-hover:#000000;
  --accent-contrast:#ffffff;

  /* ---- Status ---- */
  --green:#1fa463;
  --green-bg:#e9f7ef;
  --red:#e5484d;
  --red-bg:#fdecec;
  --amber:#c8891a;
  --amber-bg:#fbf1de;
  --blue:#3b6fe0;
  --blue-bg:#eaf0fd;

  /* ---- Shadows ---- */
  --shadow-sm:0 1px 2px rgba(17,17,17,0.04), 0 1px 1px rgba(17,17,17,0.03);
  --shadow-md:0 4px 16px rgba(17,17,17,0.06), 0 1px 3px rgba(17,17,17,0.04);
  --shadow-lg:0 12px 32px rgba(17,17,17,0.10), 0 2px 8px rgba(17,17,17,0.05);
  --shadow-modal:0 20px 60px rgba(17,17,17,0.20);

  /* ---- Radius ---- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:24px;
  --r-full:999px;

  /* ---- Spacing scale ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:56px;
  --sp-10:72px;

  /* ---- Typography ---- */
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;

  /* ---- Layout ---- */
  --sidebar-w:248px;
  --topbar-h:68px;
  --content-max:1320px;

  color-scheme:light;
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
:root[data-theme="dark"]{
  --bg:#0c0c0d;
  --surface:#161617;
  --surface-2:#1c1c1e;
  --surface-hover:#232325;
  --border:#2a2a2c;
  --border-strong:#37373a;

  --text-primary:#f5f5f4;
  --text-secondary:#a3a3a6;
  --text-tertiary:#77777b;
  --text-inverse:#111111;

  --accent:#f5f5f4;
  --accent-hover:#ffffff;
  --accent-contrast:#111111;

  --green:#36c37e;
  --green-bg:#0f2a1d;
  --red:#f2686c;
  --red-bg:#331516;
  --amber:#e0ab4d;
  --amber-bg:#2e2311;
  --blue:#6f96ee;
  --blue-bg:#141e33;

  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.45);
  --shadow-modal:0 20px 60px rgba(0,0,0,0.55);

  color-scheme:dark;
}