/* Design tokens: the single source of truth for color, spacing, type, and
   breakpoints. Nothing else in this codebase should hardcode a hex value,
   a px spacing figure, or a breakpoint width — reference a variable here. */

:root {
    /* --- Color: neutrals --- */
    --color-bg: #f7f8f7;
    --color-surface: #ffffff;
    --color-surface-sunken: #f1f3f1;
    --color-border: #e2e5e2;
    --color-text: #1a1f1a;
    --color-text-muted: #62706a;
    --color-text-faint: #93a09a;

    /* --- Color: brand (emerald family, continuity with the old palette) --- */
    --color-brand-50: #ecfdf5;
    --color-brand-100: #d1fae5;
    --color-brand-300: #6ee7b7;
    --color-brand-500: #10b981;
    --color-brand-600: #059669;
    --color-brand-700: #047857;
    --color-brand-800: #065f46;
    --color-brand-900: #064e3b;
    --color-brand-950: #032e22;

    /* --- Gradients (bold/modern-SaaS accent, used sparingly: sidebar, primary buttons) --- */
    --gradient-brand: linear-gradient(135deg, var(--color-brand-600), var(--color-brand-900));
    --gradient-sidebar: linear-gradient(180deg, var(--color-brand-900) 0%, var(--color-brand-950) 100%);

    /* --- Color: semantic money states --- */
    --color-money-positive: #0f7a4d;
    --color-money-negative: #c02b2b;
    --color-money-neutral: var(--color-text-muted);

    /* --- Color: warning (amber), for the .alert--warning banner --- */
    --color-warning-50: #fffbeb;
    --color-warning-300: #fcd34d;
    --color-warning-800: #92400e;

    /* --- Spacing scale (mirrors the rhythm the old Tailwind classes used) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* --- Typography --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;

    /* --- Radius / shadow --- */
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --shadow-card: 0 1px 2px 0 rgba(6, 40, 30, 0.06), 0 4px 10px -2px rgba(6, 40, 30, 0.10);
    --shadow-card-hover: 0 8px 20px -4px rgba(6, 40, 30, 0.18);
    --shadow-brand: 0 6px 16px -4px rgba(4, 120, 87, 0.35);

    /* --- Layout --- */
    --sidebar-width: 240px;
    --sidebar-width-tv: 280px;
    --main-max-width: 1600px;
    --main-max-width-tv: 2200px;
}

/*
   Breakpoints (documented here since custom properties can't hold media
   queries themselves — every @media rule in the other CSS files uses these
   exact widths):
     mobile  : 0    - 639px  (default, no media query needed)
     tablet  : 640  - 1023px (min-width: 640px)
     laptop  : 1024 - 1919px (min-width: 1024px) -- today's baseline look
     tv      : 1920px+       (min-width: 1920px) -- new
*/