/* =========================================
   GLOBAL DESIGN TOKENS
========================================= */

:root {

  /* App Background */
  --color-bg-app: #b5b5b8;      /* Light gray body */

  --color-bg-main: #000000;      /* dark surface */
  --color-bg-elevated: #111827;  /* deeper background */

  /* Surfaces */
  --color-bg-surface: #ffffff;  /* Cards */
  --color-bg-widget: #f3f4f6;

  /* Dark Surfaces */
  --color-bg-navbar: #000000;   /* BLACK NAVBAR */
  --color-bg-sidebar: #0b0f1a;

 /* Dark Surfaces */
  --color-black: #000000;   /* BLACK NAVBAR */

  /* Brand */
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-soft: rgba(79, 70, 229, 0.12);
  --color-primary-soft-strong: rgba(79, 70, 229, 0.20);

   /* Brand */
  --color-secondary: #aaa83b;
  --color-secondary-hover: #000;
  --color-secondary-soft: rgba(170, 168, 59, 0.12);
  --color-secondary-soft-strong: rgba(170, 168, 59, 0.20);

  /* Borders */
  --color-border-subtle: rgba(0,0,0,0.08);
  --color-border-primary: rgba(79,70,229,0.35);

  /* Text (light mode base) */
  --color-text-main: #000000;
  --color-text-strong: #111827;
  --color-text-muted: #676e7c;

  --color-success: #22c55e;        /* green */
  --color-success-hover: #16a34a;  /* darker green */
  --color-success-soft: rgba(34,197,94,0.15);

  /* Navbar text (dark surface) */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255,255,255,0.8);

  /* Overlay */
  --color-overlay: rgba(0,0,0,0.4);
  /* Danger */
  --color-danger: #ef4444;          /* red-500 */
  --color-danger-hover: #dc2626;    /* red-600 */
  --color-danger-soft: rgba(239,68,68,0.12);
}