/* =====================================================================
   CSS VARIABLES - Design tokens for colors, spacing, shadows, etc.
   ===================================================================== */

:root {
    /* Primary Colors */
    --color-teal: #14B8A6;
    --color-teal-dark: #0D9488;
    --color-teal-light: #ECFEFF;
    --color-teal-hover: #F0FDFA;

    /* Semantic Colors */
    --color-income: #16A34A;
    --color-expenses: #DC2626;
    --color-debt: #0D9488;
    --color-balance: #00FA9A;

    /* Grays */
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #6B7280;
    --color-gray-700: #334155;
    --color-gray-800: #1F2933;

    /* Text Colors */
    --color-text-primary: #1F2933;
    --color-text-secondary: #334155;
    --color-text-muted: #6B7280;
    --color-text-placeholder: #94A3B8;
    --color-text-light: #F5FFFA;

    /* Background */
    --color-bg-page: linear-gradient(135deg, #6B7280, #64748B, #5F7F7A);
    --color-bg-surface: #F8FAFC;
    --color-bg-input: #FFFFFF;
    --color-bg-form-row: #ECFEFF;
    --color-bg-form-row-hover: #E0F2F1;

    /* Borders */
    --color-border: #CBD5E1;
    --color-border-light: #E5E7EB;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.15);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.25);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.25);
    --shadow-nav: 0 8px 20px rgba(15, 23, 42, 0.15);
    --shadow-btn: 0 6px 16px rgba(20, 184, 166, 0.35);
    --shadow-btn-hover: 0 10px 24px rgba(20, 184, 166, 0.45);
    --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.08);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-full: 999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
}