/* ============================================================
   MoneyMap — Design Tokens (variables.css)
   All visual constants live here. Change here → changes everywhere.
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       Colors — Background
    ---------------------------------------------------------- */
    --color-background:     #0f1115;
    --color-surface:        #181b21;
    --color-surface-alt:    #20242c;
    --color-surface-hover:  #252a34;

    /* ----------------------------------------------------------
       Colors — Text
    ---------------------------------------------------------- */
    --color-text:           #f5f7fa;
    --color-text-muted:     #9ca3af;
    --color-text-subtle:    #6b7280;

    /* ----------------------------------------------------------
       Colors — Brand / Accent
    ---------------------------------------------------------- */
    --color-primary:        #4ade80;   /* green — positive money */
    --color-primary-dark:   #22c55e;
    --color-primary-muted:  rgba(74, 222, 128, 0.12);

    /* ----------------------------------------------------------
       Colors — Semantic
    ---------------------------------------------------------- */
    --color-danger:         #f87171;   /* red — negative / over budget */
    --color-danger-muted:   rgba(248, 113, 113, 0.12);
    --color-warning:        #fbbf24;   /* amber — warning states */
    --color-warning-muted:  rgba(251, 191, 36, 0.12);
    --color-info:           #60a5fa;   /* blue — neutral info */

    /* ----------------------------------------------------------
       Colors — UI
    ---------------------------------------------------------- */
    --color-border:         #2d333d;
    --color-border-focus:   #4ade80;
    --color-input-bg:       #0f1115;
    --color-input-bg-focus: #131619;

    /* ----------------------------------------------------------
       Category Colors — consistent across chart + list
    ---------------------------------------------------------- */
    --cat-housing:          #60a5fa;   /* blue */
    --cat-transportation:   #a78bfa;   /* purple */
    --cat-food:             #4ade80;   /* green */
    --cat-utilities:        #fbbf24;   /* amber */
    --cat-healthcare:       #f87171;   /* red */
    --cat-insurance:        #fb923c;   /* orange */
    --cat-debt:             #f472b6;   /* pink */
    --cat-entertainment:    #34d399;   /* emerald */
    --cat-shopping:         #e879f9;   /* fuchsia */
    --cat-personal:         #38bdf8;   /* sky */
    --cat-subscriptions:    #818cf8;   /* indigo */
    --cat-savings:          #a3e635;   /* lime */
    --cat-other:            #94a3b8;   /* slate */

    /* ----------------------------------------------------------
       Typography
    ---------------------------------------------------------- */
    --font-family:          system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                            Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono:            "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --font-size-xs:         0.75rem;    /* 12px */
    --font-size-sm:         0.875rem;   /* 14px */
    --font-size-base:       1rem;       /* 16px */
    --font-size-lg:         1.125rem;   /* 18px */
    --font-size-xl:         1.25rem;    /* 20px */
    --font-size-2xl:        1.5rem;     /* 24px */
    --font-size-3xl:        1.875rem;   /* 30px */
    --font-size-4xl:        2.25rem;    /* 36px */

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

    --line-height-tight:    1.25;
    --line-height-base:     1.5;
    --line-height-relaxed:  1.75;

    /* ----------------------------------------------------------
       Spacing
    ---------------------------------------------------------- */
    --space-1:  0.25rem;    /* 4px */
    --space-2:  0.5rem;     /* 8px */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-8:  2rem;       /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */

    /* ----------------------------------------------------------
       Border Radius
    ---------------------------------------------------------- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ----------------------------------------------------------
       Shadows
    ---------------------------------------------------------- */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);

    /* ----------------------------------------------------------
       Transitions
    ---------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* ----------------------------------------------------------
       Layout
    ---------------------------------------------------------- */
    --container-max-width: 1400px;
    --container-padding:   var(--space-4);

    --header-height:       64px;

    /* ----------------------------------------------------------
       Z-index scale
    ---------------------------------------------------------- */
    --z-base:    0;
    --z-raised:  10;
    --z-overlay: 100;
    --z-modal:   1000;

}