/* RLC Platform design tokens — single source of truth (see DESIGN.md).
   Every redesigned page links this file first. Never hard-code colors,
   spacing, radii or font sizes in pages: use these variables. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces */
  --surface: #f5f4f0;          /* page background (warm concrete gray) */
  --surface-raised: #ffffff;   /* cards, tables, top bar */
  --surface-sunken: #eceae4;   /* table headers, side nav, read-only fields */

  /* Text */
  --ink: #1c2430;              /* content and every number */
  --ink-muted: #5b6573;        /* labels, headers, helper text */

  /* Lines */
  --line: #d9d6ce;             /* default 1px borders */
  --line-strong: #8a929c;      /* secondary-button borders, totals rule, chart baseline */

  /* Action (the only color that means "you can act here") */
  --steel: #1e4e79;
  --steel-hover: #173d5f;
  --steel-soft: #e3edf6;       /* selection, info badges */
  --on-steel: #ffffff;

  /* Brand (max twice per screen: logo mark + active-nav bar) */
  --signal: #ea580c;
  --on-signal: #000000; /* text on the signal orange — same in both themes */

  /* Status */
  --success: #166534;  --success-soft: #dcfce7;
  --success-bright: #4ade80; /* progress-bar fill for healthy/under budget (graphics only, not text) */
  --warning: #92400e;  --warning-soft: #fef3c7;
  --danger:  #b91c1c;  --danger-soft:  #fee2e2;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shape */
  --radius-sm: 4px;   /* badges, chips */
  --radius-md: 6px;   /* buttons, inputs */
  --radius-lg: 10px;  /* cards, modals */

  /* The only shadow: menus, popovers, modals */
  --shadow-pop: 0 8px 24px rgba(28, 36, 48, .12);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --text-page-title:    600 24px/32px var(--font-sans);
  --text-section-title: 600 18px/26px var(--font-sans);
  --text-card-title:    600 15px/22px var(--font-sans);
  --text-body:          400 14px/20px var(--font-sans);
  --text-body-strong:   600 14px/20px var(--font-sans);
  --text-label:         500 12px/16px var(--font-sans);
  --text-kpi:           600 28px/34px var(--font-sans);
  --text-code:          400 13px/20px var(--font-mono);
}

/* Dark theme — the app's existing toggle (theme.js) adds class "light" to
   <html> for light mode; without it the app is dark. Same semantic tokens,
   dark values. DESIGN.md is written light-first; these keep the toggle working. */
:root:not(.light) {
  --surface: #12161c;
  --surface-raised: #1b222c;
  --surface-sunken: #0e1217;
  --ink: #e8eaee;
  --ink-muted: #99a2ad;
  --line: #2b3440;
  --line-strong: #55606e;
  --steel: #7fb0dc;
  --steel-hover: #a3c6e8;
  --steel-soft: #1d2e40;
  --on-steel: #0e1217;
  --success: #6ee7a0;  --success-soft: #123524;
  --success-bright: #34d399;
  --warning: #fbbf24;  --warning-soft: #3a2a0a;
  --danger:  #f87171;  --danger-soft:  #3f1515;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: var(--text-body);
  font-variant-numeric: tabular-nums; /* money columns line up, app-wide */
}
a { color: var(--steel); }
a:hover { color: var(--steel-hover); }
code, .code { font: var(--text-code); }