/* Design tokens — every color/space/font value lives here as --app-* vars.
   Feature CSS references these; never hard-code hex outside this file. */
:root {
  /* Brand palette — calm teal primary on warm neutrals. */
  --app-primary:        #0f766e;
  --app-primary-hover:  #0d655e;
  --app-primary-soft:   #e6f3f1;
  --app-primary-fg:     #ffffff;

  --app-accent:         #b45309;
  --app-accent-soft:    #fdf1e3;

  /* Neutrals */
  --app-bg:             #f4f5f7;
  --app-surface:        #ffffff;
  --app-surface-2:      #fafbfc;
  --app-border:         #e2e5ea;
  --app-border-strong:  #cbd1da;

  /* Text */
  --app-text:           #1b2230;
  --app-text-muted:     #5b6472;
  --app-text-faint:     #8b94a3;

  /* Status */
  --app-danger:         #b91c1c;
  --app-danger-soft:    #fdecec;
  --app-success:        #15803d;
  --app-success-soft:   #e9f6ee;
  --app-warning:        #a16207;
  --app-warning-soft:   #fdf6e3;
  /* Brief "you landed here" highlight — the month a Charts link points at. */
  --app-highlight:      #fcd98a;

  /* Sidebar (dark) */
  --app-sidebar-bg:     #14202e;
  --app-sidebar-fg:     #c4ccd8;
  --app-sidebar-fg-dim: #7f8a99;
  --app-sidebar-active-bg: #1f3142;
  --app-sidebar-active-fg: #ffffff;

  /* Spacing scale */
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-space-6: 32px;
  --app-space-7: 48px;

  /* Radius */
  --app-radius-sm: 6px;
  --app-radius:    10px;
  --app-radius-lg: 14px;
  --app-radius-pill: 999px;

  /* Typography */
  --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
              Arial, sans-serif;
  --app-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --app-fs-xs: 12px;
  --app-fs-sm: 13px;
  --app-fs-md: 14px;
  --app-fs-lg: 16px;
  --app-fs-xl: 20px;
  --app-fs-2xl: 26px;

  /* Elevation */
  --app-shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.06);
  --app-shadow:    0 2px 8px rgba(20, 32, 46, 0.08);
  --app-shadow-lg: 0 10px 30px rgba(20, 32, 46, 0.14);

  /* Layout */
  --app-sidebar-w: 248px;
  --app-topbar-h: 56px;
  --app-content-max: 1080px;      /* readable measure — forms, prose */
  --app-content-max-wide: 1920px; /* data pages — tables, the month grids */
}

/* Chart palette — categorical slots in fixed order (never cycled; a series
   keeps its slot). Order validated for colour-blind separation on the white
   card surface; slots 3–5 sit under 3:1 contrast, so every chart also offers
   a table view. Single-series charts use --app-primary. */
:root {
  --app-chart-1: #2a78d6;
  --app-chart-2: #eb6834;
  --app-chart-3: #1baf7a;
  --app-chart-4: #eda100;
  --app-chart-5: #e87ba4;
  --app-chart-6: #008300;
  --app-chart-7: #6250d6;
  --app-chart-8: #e34948;
  --app-chart-grid: #eceef2;
  --app-chart-axis: #cbd1da;
}