/* ==========================================================================
   KONTROLLE.FINANCE - CSS Variables
   Design System V5 — Stone + Zinc + Teal
   Reference: Prototipo/DS.md
   ========================================================================== */

:root {
    /* ========== V5 — SURFACES ========== */
    --surface-0:      #FAFAF8;
    --surface-1:      #F5F5F3;
    --surface-2:      #EDEDEB;
    --surface-3:      #E0E0DC;
    --surface-inv:    #18181B;
    --surface-inv-1:  #27272A;
    --surface-inv-2:  #3F3F46;
    --surface-overlay: rgba(0, 0, 0, 0.6);

    /* ========== V5 — TEXT ========== */
    --text-0:         #18181B;
    --text-1:         #3F3F46;
    --text-2:         #71717A;
    --text-3:         #A1A1AA;
    --text-inv:       #FAFAF8;
    --text-inv-muted: rgba(250, 250, 248, 0.5);

    /* ========== V5 — BORDERS ========== */
    --border:         #E4E4E7;
    --border-subtle:  #F0F0EE;
    --border-strong:  #D4D4D8;
    --border-heavy:   #18181B;

    /* ========== V5 — ACCENT (teal) ========== */
    --accent:         #0F766E;
    --accent-hover:   #115E59;
    --accent-light:   #14B8A6;
    --accent-pale:    #F0FDFA;
    --accent-border:  rgba(15, 118, 110, 0.25);
    --accent-muted:   rgba(15, 118, 110, 0.06);

    /* ========== V5 — FINANCIAL SEMANTIC ========== */
    --pos:            #16A34A;
    --pos-bg:         #F0FDF4;
    --neg:            #DC2626;
    --neg-bg:         #FEF2F2;
    --warn:           #D97706;
    --warn-bg:        #FFFBEB;
    --info:           #2563EB;
    --info-bg:        #EFF6FF;

    /* ========== V5 — SEMANTIC SHADE RAMPS (para heatmaps de buckets, ex: Aging) ========== */
    --pos-500:        #16A34A;
    --pos-400:        #22C55E;
    --pos-300:        #4ADE80;
    --pos-200:        #86EFAC;
    --pos-100:        #BBF7D0;
    --neg-500:        #DC2626;
    --neg-400:        #EF4444;
    --neg-300:        #F87171;
    --neg-200:        #FCA5A5;
    --neg-100:        #FECACA;

    /* ========== V5 — CHART PALETTE (categorical, NÃO usar para dados financeiros) ========== */
    /* Distinguibilidade para múltiplas séries (avatar colors, charts categóricos). Mantém-se na paleta V5 (accent + cores semânticas como hues). */
    --chart-1:        #0F766E; /* teal (accent) */
    --chart-2:        #2563EB; /* blue (info) */
    --chart-3:        #D97706; /* amber (warn) */
    --chart-4:        #7C3AED; /* violet */
    --chart-5:        #DB2777; /* pink */
    --chart-6:        #0891B2; /* cyan */
    --chart-7:        #65A30D; /* lime */
    --chart-8:        #71717A; /* slate (text-2) */

    /* ========== SHADOWS — Structure through borders, not elevation ========== */
    --shadow-none:      none;
    --shadow-sticky:    2px 0 4px rgba(0, 0, 0, 0.04);
    --shadow-dropdown:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-focus:     0 0 0 2px var(--accent);

    /* ========== TYPOGRAPHY ==========
       Família única: IBM Plex Sans (UI, dados e KPI hero).
       Alinhamento contábil de números via font-variant-numeric: tabular-nums
       (aplicado globalmente em body — ver modern.css).
       Classe utility .kl-num (components.css) reforça em containers densos.
    */

    --font-body:        "IBM Plex Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
    --font-data:        "IBM Plex Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
    --font-display:     "IBM Plex Sans", -apple-system, system-ui, "Segoe UI", sans-serif;

    /* Aliases — todos resolvem na mesma família por compatibilidade com 412+50 usos espalhados */
    --f-display: var(--font-display);
    --f-ui:      var(--font-body);
    --f-data:    var(--font-data);
    --font-ui:   var(--font-body);
    --font-mono: var(--font-data);   /* legacy, usado em budgetplanner.css */

    /* Font Sizes */
    --text-xs:          0.75rem;        /* 12px */
    --text-sm:          0.875rem;       /* 14px */
    --text-base:        1rem;           /* 16px */
    --text-lg:          1.125rem;       /* 18px */
    --text-xl:          1.25rem;        /* 20px */
    --text-2xl:         1.5rem;         /* 24px */
    --text-3xl:         2rem;           /* 32px */
    --text-4xl:         2.5rem;         /* 40px */
    --text-5xl:         3.5rem;         /* 56px */

    /* Font Weights */
    --font-light:       300;
    --font-normal:      400;
    --font-medium:      500;
    --font-semibold:    600;
    --font-bold:        700;
    --font-black:       900;

    /* V5 short aliases */
    --fw-light:    var(--font-light);
    --fw-regular:  var(--font-normal);
    --fw-medium:   var(--font-medium);
    --fw-semibold: var(--font-semibold);
    --fw-bold:     var(--font-bold);
    --fw-black:    var(--font-black);

    /* Line Heights */
    --leading-none:     1;
    --leading-tight:    1.25;
    --leading-snug:     1.375;
    --leading-normal:   1.5;
    --leading-relaxed:  1.625;
    --leading-loose:    2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;

    /* V5 short aliases */
    --ls-tighter: -0.04em;
    --ls-tight:   -0.02em;
    --ls-normal:  0;
    --ls-wide:    0.04em;
    --ls-wider:   0.08em;
    --ls-widest:  0.12em;

    /* ========== SPACING ========== */
    --space-0:          0;
    --space-px:         1px;
    --space-0\.5:       0.125rem;       /* 2px */
    --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 */
    --space-20:         5rem;           /* 80px */
    --space-24:         6rem;           /* 96px */

    /* V5 short aliases */
    --s-1:  var(--space-1);
    --s-2:  var(--space-2);
    --s-3:  var(--space-3);
    --s-4:  var(--space-4);
    --s-5:  var(--space-5);
    --s-6:  var(--space-6);
    --s-8:  var(--space-8);
    --s-10: var(--space-10);
    --s-12: var(--space-12);
    --s-16: var(--space-16);

    /* ========== BORDER RADIUS — 0 across the board ========== */
    --radius-none:      0;
    --radius-sm:        0;
    --radius-md:        0;
    --radius-lg:        0;
    --radius-xl:        0;
    --radius-2xl:       0;
    --radius-3xl:       0;
    --radius-full:      0;
    --radius-circular:  50%;   /* Exception: avatars */
    --radius-chip:      2px;   /* Exception: module chips */

    /* ========== BORDER WIDTHS ========== */
    --border-width-hairline:    1px;
    --border-width-thin:        1px;
    --border-width-medium:      2px;
    --border-width-thick:       4px;
    --border-width-ultra:       8px;

    /* V5 short aliases */
    --bw-hair:   1px;
    --bw-medium: 2px;
    --bw-thick:  3px;
    --bw-ultra:  4px;

    /* ========== TRANSITIONS ========== */
    --transition-instant:   0ms;
    --transition-fast:      100ms ease;
    --transition-normal:    150ms ease;
    --transition-slow:      150ms ease;
    --transition-slower:    150ms ease;

    /* V5 short aliases */
    --t-instant: 0ms;
    --t-fast:    100ms ease;
    --t-normal:  150ms ease;
    --t-slow:    200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* V5 animations */
    --anim-page: klFadeUp 0.28s ease both;

    /* ========== Z-INDEX ========== */
    --z-base:               0;
    --z-sticky-column:      5;
    --z-sticky-header:      10;
    --z-dropdown:           1000;
    --z-sticky:             1020;
    --z-fixed:              1030;
    --z-modal-backdrop:     1040;
    --z-modal:              1050;
    --z-popover:            1060;
    --z-tooltip:            1070;
    --z-toast:              1080;

    /* ========== LAYOUT ========== */
    --sidebar-width:            240px;
    --sidebar-collapsed-width:  64px;
    --topbar-height:            52px;
    --content-max-width:        1600px;

    /* ========== BREAKPOINTS (reference for JS) ========== */
    --breakpoint-sm:    576px;
    --breakpoint-md:    768px;
    --breakpoint-lg:    992px;
    --breakpoint-xl:    1200px;
    --breakpoint-xxl:   1600px;
}

/* ========== V5 ANIMATIONS ========== */
@keyframes klFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes klShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ========== DARK MODE (V5) ========== */
[data-theme="dark"] {
    --surface-0:      #09090B;
    --surface-1:      #18181B;
    --surface-2:      #27272A;
    --surface-3:      #3F3F46;
    --surface-inv:    #FAFAF8;
    --surface-inv-1:  #F5F5F3;
    --surface-inv-2:  #EDEDEB;
    --surface-overlay: rgba(0, 0, 0, 0.8);

    --text-0:         #FAFAF8;
    --text-1:         #A1A1AA;
    --text-2:         #71717A;
    --text-3:         #3F3F46;
    --text-inv:       #18181B;
    --text-inv-muted: rgba(24, 24, 27, 0.5);

    --border:         rgba(250, 250, 248, 0.08);
    --border-subtle:  rgba(250, 250, 248, 0.05);
    --border-strong:  rgba(250, 250, 248, 0.15);
    --border-heavy:   rgba(250, 250, 248, 0.6);

    --accent:         #14B8A6;
    --accent-hover:   #2DD4BF;
    --accent-light:   #5EEAD4;
    --accent-pale:    rgba(20, 184, 166, 0.1);
    --accent-border:  rgba(20, 184, 166, 0.25);
    --accent-muted:   rgba(20, 184, 166, 0.06);

    --pos:            #4ADE80;
    --pos-bg:         rgba(74, 222, 128, 0.1);
    --neg:            #F87171;
    --neg-bg:         rgba(248, 113, 113, 0.1);
    --warn:           #FBBF24;
    --warn-bg:        rgba(251, 191, 36, 0.1);
    --info:           #60A5FA;
    --info-bg:        rgba(96, 165, 250, 0.1);

    --shadow-focus:   0 0 0 2px var(--accent);
}