/* ============================================================
   MaxPanel — Theme tokens
   Re-skin the entire panel by editing this file only.
   Light defaults live in :root; dark overrides in [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --primary:          #5a4fe0;
  --primary-hover:    #4a3fce;
  --primary-active:   #3f35b8;
  --primary-contrast: #ffffff;

  /* ---- Semantic accents ---- */
  --success: #1aa251;
  --danger:  #e5484d;
  --warning: #f5a524;
  --info:    #0ba5ec;

  /* RGB triplets (for rgba() / chart fills where color-mix is awkward) */
  --primary-rgb: 90 79 224;
  --success-rgb: 26 162 81;
  --danger-rgb:  229 72 77;
  --warning-rgb: 245 165 36;
  --info-rgb:    11 165 236;

  /* ---- Neutral surfaces (light) ---- */
  --body-bg:    #f3f4f7;
  --surface:    #ffffff;
  --surface-2:  #f8f9fb;     /* subtle alt rows / wells */
  --surface-3:  #f1f2f6;
  --border:     #e7e9ef;
  --border-2:   #eef0f4;

  /* ---- Text ---- */
  --text:        #11141b;
  --text-muted:  #69707d;
  --text-subtle: #99a0ad;
  --text-invert: #ffffff;

  /* ---- Sidebar (dark in both themes) ---- */
  --sidebar-bg:        #15171f;
  --sidebar-surface:   #1b1e28;
  --sidebar-text:      #aab1bf;
  --sidebar-text-hi:   #ffffff;
  --sidebar-muted:     #6b7282;
  --sidebar-heading:   #565d6c;
  --sidebar-border:    rgba(255,255,255,.07);
  --sidebar-hover-bg:  rgba(255,255,255,.05);
  --sidebar-active-bg: color-mix(in srgb, var(--primary) 22%, transparent);

  /* ---- Effects ---- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --shadow:    0 4px 14px -4px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg: 0 18px 40px -12px rgba(16,24,40,.22);

  --radius-xs: 7px;
  --radius-sm: 9px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Layout metrics ---- */
  --nav-h: 58px;
  --side-w: 250px;
  --side-w-collapsed: 74px;
  --content-max: 100%;   /* content fills the full width of the main area (no centered side gutters) */

  /* ---- Typography ---- */
  --font-ui:      "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-ui);
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --primary:        #6f66f0;
  --primary-hover:  #8079f3;
  --primary-active: #5d54e0;

  --body-bg:    #0d0f15;
  --surface:    #161922;
  --surface-2:  #1b1f29;
  --surface-3:  #20242f;
  --border:     #262b36;
  --border-2:   #20242e;

  --text:        #e7e9ee;
  --text-muted:  #98a0b0;
  --text-subtle: #6c7382;

  --sidebar-bg:      #101218;
  --sidebar-surface: #181b24;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow:    0 6px 18px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 44px -12px rgba(0,0,0,.65);
}