/* styles/variables.css
   AgLeaseCo LM&C — Design tokens.
   Single source of truth for colour, type, spacing and elevation.
   Dark theme overrides live in dark.css and re-bind these same names. */

:root {
  /* ---------- Brand ---------- */
  --brand-green:        #1E5B43;
  --brand-green-dark:   #173C2C;
  --brand-green-hover:  #20513B;
  --brand-gold:         #C89A2B;

  /* ---------- Surfaces ---------- */
  --bg-page:            #F4F6F5;
  --bg-surface:         #FFFFFF;
  --bg-surface-alt:     #FAFBFA;
  --bg-subtle:          #EEF2F0;
  --bg-inset:           #E8EDEA;
  --bg-sidebar:         #173C2C;
  --bg-sidebar-hover:   #20513B;
  --bg-sidebar-active:  #1E5B43;
  --bg-toolbar:         #FFFFFF;

  /* ---------- Lines ---------- */
  --border:             #D9E0DC;
  --border-strong:      #C2CCC7;
  --border-sidebar:     #234634;

  /* ---------- Text ---------- */
  --text:               #222222;
  --text-secondary:     #5F6B65;
  --text-muted:         #7E8A84;
  --text-inverse:       #FFFFFF;
  --text-sidebar:       #C9D8D0;
  --text-sidebar-muted: #8AA398;

  /* ---------- Status ---------- */
  --success:            #2E7D32;
  --warning:            #D97706;
  --danger:             #C62828;
  --info:               #1565C0;
  --neutral:            #5F6B65;

  --success-bg:         #E7F1E8;
  --warning-bg:         #FBF0E0;
  --danger-bg:          #F8E7E7;
  --info-bg:            #E4EDF8;
  --neutral-bg:         #ECEFEE;
  --gold-bg:            #F8F1DE;

  --success-border:     #B9D6BB;
  --warning-border:     #E8CFA4;
  --danger-border:      #E5B7B7;
  --info-border:        #B4CCE9;
  --neutral-border:     #CFD6D3;
  --gold-border:        #E3D2A0;

  /* ---------- Type ---------- */
  --font-sans:  "IBM Plex Sans", "Source Sans 3", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", "Roboto Mono", "Consolas", monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;   /* table body */
  --fs-14: 14px;   /* base body */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;   /* h4 / card title */
  --fs-20: 20px;   /* h3 */
  --fs-22: 22px;   /* h2 / page title */
  --fs-26: 26px;   /* h1 / KPI figure */
  --fs-30: 30px;   /* hero KPI only */

  --lh-tight: 1.25;
  --lh-base:  1.45;

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

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

  /* ---------- Structure ---------- */
  --sidebar-w:     260px;
  --sidebar-w-min: 60px;
  --toolbar-h:     64px;
  --radius:        4px;
  --radius-sm:     3px;
  --radius-pill:   2px;

  /* ---------- Elevation (flat, no glow) ---------- */
  --shadow-1: 0 1px 2px rgba(19, 41, 32, 0.08);
  --shadow-2: 0 2px 6px rgba(19, 41, 32, 0.10);
  --shadow-3: 0 8px 24px rgba(19, 41, 32, 0.14);

  /* ---------- Motion ---------- */
  --t-hover: 150ms ease;
  --t-panel: 200ms ease;

  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand-gold);

  /* ---------- Charts ---------- */
  --chart-1: #1E5B43;
  --chart-2: #C89A2B;
  --chart-3: #1565C0;
  --chart-4: #D97706;
  --chart-5: #C62828;
  --chart-grid: #E3E8E6;
  --chart-label: #5F6B65;
}