/* =========================================================
   MONEYTOOL.IO
   GLOBAL DESIGN TOKENS
   Single source of truth for the entire website
   ========================================================= */

:root {

    /* =====================================================
       BRAND COLORS
       ===================================================== */

    --primary: #0F766E;
    --primary-dark: #115E59;
    --primary-light: #14B8A6;

    --secondary: #14B8A6;

    --accent: #F59E0B;

    --success: #16A34A;
    --danger: #DC2626;
    --warning: #F59E0B;


    /* =====================================================
       BACKGROUNDS
       ===================================================== */

    --background: #F8FAFC;
    --surface: #FFFFFF;
    --surface-soft: #F8FAFC;
    --surface-muted: #F1F5F9;


    /* =====================================================
       TEXT COLORS
       ===================================================== */

    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-body: #475569;
    --text-light: #64748B;
    --text-muted: #64748B;
    --text-white: #FFFFFF;


    /* =====================================================
       BORDERS
       ===================================================== */

    --border-normal: #E2E8F0;
    --border-card: #E2E8F0;
    --border-input: #CBD5E1;
    --border-light: #F1F5F9;


    /* =====================================================
       BORDER RADIUS
       ===================================================== */

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;


    /* =====================================================
       SHADOWS
       ===================================================== */

    --shadow-light:
        0 4px 16px rgba(15, 23, 42, 0.06);

    --shadow-card:
        0 6px 20px rgba(15, 23, 42, 0.07);

    --shadow-hover:
        0 12px 30px rgba(15, 23, 42, 0.10);

    --shadow-medium:
        0 8px 24px rgba(15, 23, 42, 0.08);

    --shadow-large:
        0 18px 40px rgba(15, 23, 42, 0.12);

    --shadow-xl:
        0 25px 60px rgba(15, 23, 42, 0.15);


    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    --font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-numeric:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;


    /* =====================================================
       FONT SIZES
       ===================================================== */

    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 21px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 44px;


    /* =====================================================
       LINE HEIGHTS
       ===================================================== */

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;


    /* =====================================================
       TRANSITIONS
       ===================================================== */

    --transition-fast: 0.15s ease;
    --transition: 0.20s ease;
    --transition-slow: 0.30s ease;


    /* =====================================================
       CONTAINER
       ===================================================== */

    --container-width: 1240px;
    --container-padding: 20px;


    /* =====================================================
       Z-INDEX SYSTEM
       ===================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-modal: 2000;
    --z-toast: 3000;


    /* =====================================================
       ACCESSIBILITY
       ===================================================== */

    --focus-ring:
        0 0 0 3px rgba(15, 118, 110, 0.20);


    /* =====================================================
       BACKWARD COMPATIBILITY
       -----------------------------------------------------
       These aliases allow older components to continue
       working while the project is standardized.
       ===================================================== */

    /* Brand */

    --primary-color: var(--primary);
    --primary-hover: var(--primary-dark);
    --secondary-color: var(--secondary);
    --accent-color: var(--accent);

    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);


    /* Background */

    --background-color: var(--background);
    --surface-color: var(--surface);


    /* Typography */

    --heading-color: var(--text-primary);
    --text-color: var(--text-secondary);


    /* Borders */

    --border-color: var(--border-normal);


    /* Shadows */

    --shadow-sm: var(--shadow-light);
    --shadow-md: var(--shadow-medium);
    --shadow-lg: var(--shadow-large);

}