/* ==========================================================================
   DESIGN TOKENS — single source of truth. Change brand here, nothing else.
   Inspired by the AWS console: navy top bar, white nav, grey canvas, blue links.
   ========================================================================== */
:root {
  /* Brand */
  --c-brand-900: #0f1b2a;
  --c-brand-800: #161d26;       /* top bar */
  --c-brand-700: #232f3e;
  --c-primary-700: #033160;
  --c-primary-600: #0972d3;     /* links, focus, active */
  --c-primary-500: #3b73b9;     /* info banner */
  --c-primary-100: #f0f8ff;
  --c-accent-600: #ec7211;      /* primary CTA (orange) */
  --c-accent-700: #eb5f07;

  /* Neutrals */
  --c-bg-canvas: #f2f3f3;
  --c-bg-surface: #ffffff;
  --c-bg-subtle: #f9fafa;
  --c-bg-hover: #f2f8fd;
  --c-border: #d5dbdb;
  --c-border-strong: #aab7b8;
  --c-text: #0f141a;
  --c-text-muted: #5f6b7a;
  --c-text-disabled: #9ba7b6;
  --c-text-on-dark: #ffffff;
  --c-text-on-dark-muted: #b6bec9;

  /* Status */
  --c-success: #037f0c;  --c-success-bg: #f2fcf3;
  --c-warning: #8d6605;  --c-warning-bg: #fffce9;
  --c-danger:  #d91515;  --c-danger-bg:  #fff7f7;
  --c-info:    #0972d3;  --c-info-bg:    #f0f8ff;

  /* Typography */
  --font-sans: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: "Monaco", Menlo, Consolas, "Courier New", monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-h3: 18px; --fs-h2: 20px; --fs-h1: 28px;
  --lh-tight: 1.25; --lh-body: 1.5;

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

  /* Shape & depth */
  --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px;
  --shadow-card: 0 1px 1px 0 rgba(0,28,36,.3), 1px 1px 1px 0 rgba(0,28,36,.15), -1px 1px 1px 0 rgba(0,28,36,.15);
  --shadow-pop: 0 4px 20px 1px rgba(0,28,36,.25);
  --focus-ring: 0 0 0 2px var(--c-bg-surface), 0 0 0 4px var(--c-primary-600);

  /* Layout */
  --topbar-h: 40px;
  --nav-w: 224px;
  --nav-w-collapsed: 56px;
  --content-max: 1600px;

  /* Density (comfortable default) */
  --row-h: 40px;
  --ctl-h: 32px;
  --card-pad: var(--s-5);
}

/* Compact density — for data-heavy, high-scale ERP screens */
:root[data-density="compact"] {
  --row-h: 30px;
  --ctl-h: 28px;
  --card-pad: var(--s-3);
  --fs-md: 13px;
}

/* Dark theme */
:root[data-theme="dark"] {
  --c-bg-canvas: #0f1b2a;
  --c-bg-surface: #161d26;
  --c-bg-subtle: #1b232d;
  --c-bg-hover: #1f2b3a;
  --c-border: #2c3744;
  --c-border-strong: #4a5666;
  --c-text: #e9ebed;
  --c-text-muted: #9ba7b6;
  --c-text-disabled: #5f6b7a;
  --c-primary-600: #539fe5;
  --c-primary-100: #12263a;
  --c-success: #2bb534;  --c-success-bg: #0d2410;
  --c-warning: #e0ca57;  --c-warning-bg: #2a2406;
  --c-danger:  #ff7a7a;  --c-danger-bg:  #2d1212;
  --c-info:    #539fe5;  --c-info-bg:    #12263a;
  --c-brand-800: #0b1119;
  --shadow-card: 0 0 0 1px #2c3744;
}