/* ============================================================
   PGP Finserve CRM — Design Tokens
   Palette ported from GURU AI Technologies' own design system
   (deep navy + blue→cyan brand gradient, cool blue-gray neutrals),
   re-themed with PGP's own brand names kept as the variable names
   so every component that already reads var(--indigo) etc. just
   picks up the new values automatically.
   ============================================================ */
:root{
  /* Brand palette (GURU AI OS values) */
  --navy:#070B14;
  --navy-light:#0F2A66;
  --indigo:#1D59F2;        /* = GURU --accent */
  --indigo-light:#4F8AFA;
  --violet:#0E74B0;        /* = GURU brand-gradient end stop */
  --emerald:#157A6E;
  --sky:#0FA9F0;           /* = GURU --accent-2 */
  --amber:#8F5608;         /* = GURU --warn */
  --rose:#B52A2A;          /* = GURU --danger */
  --teal:#0A6392;          /* = GURU --info */
  --brand-gradient:linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%);

  /* Light theme surface (GURU AI OS neutral scale) */
  --bg:#F3F6FB;
  --bg-alt:#F7F9FC;
  --surface:#FBFCFE;
  --surface-raised:#FFFFFF;
  --border:#DCE3EE;
  --border-soft:#EAEFF7;
  --text-primary:#0B1220;
  --text-secondary:#4A5670;
  --text-muted:#677388;
  --sidebar-bg:#070B14;
  --sidebar-text:rgba(255,255,255,.72);
  --sidebar-text-active:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(7,11,20,.06);
  --shadow-md:0 8px 24px rgba(7,11,20,.08);
  --shadow-lg:0 20px 48px rgba(7,11,20,.16);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;

  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

:root[data-theme="dark"]{
  /* Brand accents brighten slightly in dark mode for contrast,
     same approach GURU AI OS uses in its own tokens. */
  --indigo:#3D8BFF;
  --indigo-light:#6DA8FF;
  --violet:#29C2FF;
  --emerald:#2DD4BF;
  --sky:#29C2FF;
  --amber:#F0B23D;
  --rose:#F17272;
  --teal:#5CC8FF;

  --bg:#060A13;
  --bg-alt:#0B1220;
  --surface:#0F1729;
  --surface-raised:#152038;
  --border:#1E2A45;
  --border-soft:#192742;
  --text-primary:#E6ECF5;
  --text-secondary:#9FB0CC;
  --text-muted:#7D8CAA;
  --sidebar-bg:#060A13;
  --sidebar-text:rgba(255,255,255,.65);
  --sidebar-text-active:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 20px 48px rgba(0,0,0,.55);
}

/* Fallback only for a page with no theme JS at all (every real page in
   this site sets data-theme explicitly before paint — see the inline
   head script — so first-time visitors always default to LIGHT, never
   to this media query, regardless of OS/browser dark-mode setting). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --indigo:#3D8BFF;
    --indigo-light:#6DA8FF;
    --violet:#29C2FF;
    --emerald:#2DD4BF;
    --sky:#29C2FF;
    --amber:#F0B23D;
    --rose:#F17272;
    --teal:#5CC8FF;
    --bg:#060A13;
    --bg-alt:#0B1220;
    --surface:#0F1729;
    --surface-raised:#152038;
    --border:#1E2A45;
    --border-soft:#192742;
    --text-primary:#E6ECF5;
    --text-secondary:#9FB0CC;
    --text-muted:#7D8CAA;
    --sidebar-bg:#060A13;
  }
}