/* ============================================================
   Bryan's Email Command Center — Fluent Design Variables
   Implements Microsoft Fluent Design System tokens
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --accent:           #0078d4;
  --accent-hover:     #106ebe;
  --accent-active:    #005a9e;
  --accent-light:     #cce4f6;
  --accent-subtle:    #eff6fc;

  /* ── Triage Severity Colors ─────────────────────────────── */
  --urgent:           #d13438;
  --urgent-bg:        #fdf3f3;
  --urgent-border:    #f1baba;
  --high:             #c7811b;
  --high-bg:          #fef7ee;
  --high-border:      #f2d0a0;
  --normal:           #0078d4;
  --normal-bg:        #eff6fc;
  --normal-border:    #c7e0f4;
  --low:              #498205;
  --low-bg:           #f1f8eb;
  --low-border:       #b5d7a0;
  --noise:            #8a8886;
  --noise-bg:         #f3f2f1;
  --noise-border:     #c8c6c4;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family:      'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:        'Cascadia Code', 'Consolas', 'Courier New', monospace;

  --text-xs:          11px;
  --text-sm:          12px;
  --text-base:        14px;
  --text-md:          16px;
  --text-lg:          20px;
  --text-xl:          24px;
  --text-2xl:         28px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── Spacing (8px grid) ─────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:        2px;
  --radius-md:        4px;
  --radius-lg:        8px;
  --radius-xl:        12px;
  --radius-full:      9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:        0 1px 2px rgba(0,0,0,.12);
  --shadow-md:        0 2px 8px rgba(0,0,0,.16);
  --shadow-lg:        0 8px 24px rgba(0,0,0,.20);
  --shadow-xl:        0 16px 48px rgba(0,0,0,.24);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:  100ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  300ms ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:    240px;
  --sidebar-collapsed: 52px;
  --topbar-height:    48px;
  --detail-pane-width: 400px;
}

/* ── Light Mode (default) ────────────────────────────────── */
:root, [data-theme="light"] {
  --bg-primary:       #f3f2f1;
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #faf9f8;
  --bg-sidebar:       #f3f2f1;
  --bg-sidebar-item:  transparent;
  --bg-sidebar-hover: #e9e8e7;
  --bg-sidebar-active:#dde3ea;
  --bg-card:          #ffffff;
  --bg-input:         #ffffff;
  --bg-overlay:       rgba(0,0,0,0.4);

  --border-subtle:    #edebe9;
  --border-default:   #d2d0ce;
  --border-strong:    #a19f9d;

  --text-primary:     #201f1e;
  --text-secondary:   #605e5c;
  --text-tertiary:    #a19f9d;
  --text-disabled:    #c8c6c4;
  --text-on-accent:   #ffffff;

  --icon-primary:     #201f1e;
  --icon-secondary:   #605e5c;

  --scrollbar-track:  #f3f2f1;
  --scrollbar-thumb:  #c1c0be;
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:       #1b1a19;
  --bg-secondary:     #252423;
  --bg-tertiary:      #201f1e;
  --bg-sidebar:       #201f1e;
  --bg-sidebar-item:  transparent;
  --bg-sidebar-hover: #2d2c2b;
  --bg-sidebar-active:#37363a;
  --bg-card:          #252423;
  --bg-input:         #323130;
  --bg-overlay:       rgba(0,0,0,0.6);

  --border-subtle:    #2d2c2b;
  --border-default:   #3b3a39;
  --border-strong:    #605e5c;

  --text-primary:     #f3f2f1;
  --text-secondary:   #c8c6c4;
  --text-tertiary:    #a19f9d;
  --text-disabled:    #484644;
  --text-on-accent:   #ffffff;

  --icon-primary:     #f3f2f1;
  --icon-secondary:   #c8c6c4;

  --urgent-bg:        #2c1515;
  --urgent-border:    #5a2020;
  --high-bg:          #2c1f0a;
  --high-border:      #5a3a10;
  --normal-bg:        #0a1e2c;
  --normal-border:    #10395a;
  --low-bg:           #0e1f05;
  --low-border:       #1e4010;
  --noise-bg:         #252423;
  --noise-border:     #3b3a39;

  --scrollbar-track:  #201f1e;
  --scrollbar-thumb:  #484644;
}