/* Spens Application Color Palette - CSS Custom Properties */
:root {
  /* Font — Geist Sans (Vercel), Plus Jakarta Sans (fallback) */
  --font-family-base: 'Geist', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Primary Colors */
  --color-primary: #3F51B5;
  --color-primary-50: #7885cb;
  --color-primary-20: #c5cae8;
  --color-primary-dark: #303f9f;
  --color-primary-rgb: 63, 81, 181;
  --color-secondary: #424660;
  --color-secondary-50: #8d909f;
  --color-muted-strong: #6b6f80; /* AA-safe muted for sub-1rem text */
  --color-secondary-20: #d9dadf;
  --color-secondary-dark: #2c3044;
  --color-secondary-rgb: 66, 70, 96;
  --color-success: #4CAF50;
  --color-success-50: #93cf96;
  --color-success-20: #dbefdc;
  --color-success-dark: #388e3c;
  --color-success-rgb: 76, 175, 80;
  --color-danger: #F44336;
  --color-danger-50: #f88e86;
  --color-danger-20: #fcd9d6;
  --color-danger-dark: #d32f2f;
  --color-danger-rgb: 244, 67, 54;
  --color-warning: #FF9800;
  --color-warning-50: #ffc166;
  --color-warning-20: #ffeacc;
  --color-warning-dark: #f57c00;
  --color-warning-rgb: 255, 152, 0;
  --color-info: #2196F3;
  --color-info-50: #79c0f7;
  --color-info-20: #d2eafc;
  --color-info-dark: #1565c0;
  --color-info-rgb: 33, 150, 243;

  /* Base Colors */
  --color-white: #ffffff;
  --color-white-light: #fafafa;
  --color-black: #000000;
  --color-gray: #6b7280;

  /* Additional Colors */
  --color-dark-gray: #2E2F36;
  --color-steel-blue: #3F76B5;
  --color-emerald-green: #3FB559;
  --color-royal-purple: #7A3FB5;
  --color-charcoal-black: #282A33;
  --color-deep-indigo: #48528B;
  --color-olive-gold: #B5B13F;
  --color-crimson-red: #B53F4D;
  --color-golden-brown: #B58B3F;

  /* Tint Colors */
  --color-soft-blue: #8B96D2;
  --color-sky-blue: #8BACD2;
  --color-mint-green: #8BD29B;
  --color-slate-gray: #8D909F;
  --color-light-gray: #D1D5DB;
  --color-lavender-gray: #9197B9;
  --color-light-purple: #AF8BD2;
  --color-warm-beige: #D2B98B;
  --color-pale-gold: #D2D08B;
  --color-rose-pink: #D28B94;
  --color-off-white: #F8F9FA;

  /* Landing / marketing */
  --color-text-secondary: #5b606e;
  --color-muted-on-dark: #9197B9;
  --color-border-soft: #e2e3e9;
  --color-surface-sunken: #f6f7fb; /* soft grey inset panels */
  --color-surface-sunken-2: #f1f2f6;
  --color-canvas-wrap-up: #f3f4f8; /* finished-month page canvas */
  --color-banner-track: #e6e8f2; /* segmented mode banner track */
  --color-separator: #eff0f4;
  --color-separator-2: #f4f5f8;
  --color-amber-ink: #8a4f00; /* text on amber fills */
  --color-amber-ink-soft: #96601a;
  --color-neutral-pill: #e4e6ee; /* inactive icon pill / segment */
  --color-primary-tint: #eef0f8; /* softest indigo wash for info encarts */
  --color-primary-ink: #3d4a8f; /* readable indigo text on the tint */
  --color-border-input: #d9dadf;
  --color-violet: #7A3FB5;
  --color-violet-20: #e5dcf2;

  /* Semantic Color Mappings */
  --text-primary: var(--color-primary);
  --text-secondary: var(--color-secondary);
  --text-dark: var(--color-charcoal-black);
  --text-muted: #5b606e;

  /* Background Colors */
  --bg-primary: var(--color-primary);
  --bg-primary-50: var(--color-primary-50);
  --bg-primary-20: var(--color-primary-20);
  --bg-secondary: var(--color-secondary);
  --bg-secondary-50: var(--color-secondary-50);
  --bg-secondary-20: var(--color-secondary-20);
  --bg-success: var(--color-success);
  --bg-success-50: var(--color-success-50);
  --bg-success-20: var(--color-success-20);
  --bg-danger: var(--color-danger);
  --bg-danger-50: var(--color-danger-50);
  --bg-danger-20: var(--color-danger-20);
  --bg-warning: var(--color-warning);
  --bg-warning-50: var(--color-warning-50);
  --bg-warning-20: var(--color-warning-20);
  --bg-info: var(--color-info);
  --bg-info-50: var(--color-info-50);
  --bg-info-20: var(--color-info-20);
  --bg-off-white: var(--color-off-white);
  --bg-surface: white;
  --bg-card-1: var(--color-soft-blue);
  --bg-card-2: var(--color-mint-green);
  --bg-card-3: var(--color-light-purple);

  /* Border Colors */
  --border-primary: var(--color-primary);
  --border-secondary: var(--color-secondary);
  --border-success: var(--color-success);
  --border-danger: var(--color-danger);
  --border-warning: var(--color-warning);
  --border-default: var(--color-slate-gray);
  --border-light: var(--color-off-white);
  --border-focus: var(--color-primary);

  /* Interactive States */
  --hover-primary: var(--color-primary);
  --hover-secondary: var(--color-secondary);
  --hover-success: var(--color-success);
  --hover-danger: var(--color-danger);
  --hover-warning: var(--color-warning);

  --focus-ring: var(--color-primary);

  /* ── Radius scale (DESIGN.md §5) ───────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ── Spacing scale (DESIGN.md §Spacing) ────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;

  /* ── Elevation (DESIGN.md §4) — soft, diffuse, never outlining ─ */
  --shadow-resting: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);

  /* ── Typography scale (DESIGN.md §3) ───────────────────────── */
  --font-size-hero: 2.375rem; /* 38px — the page's single glanceable money figure */
  --font-size-display: 1.75rem;
  --font-size-headline: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
  --font-size-label: 0.75rem;

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

  --tracking-display: -0.02em;
  --tracking-headline: -0.01em;
}