/*
 * TradeVest Securities
 * Design System Variables
 *
 * @package TradeVest_Securities
 */

:root {

    /* =====================================================
       1. BRAND COLORS
       ===================================================== */

    --tv-navy: #071A2B;
    --tv-navy-light: #0D263A;

    --tv-teal: #0F766E;
    --tv-teal-dark: #0B625C;
    --tv-teal-light: #D8EEEB;
    --tv-teal-soft: #E8F3F1;


    /* =====================================================
       2. BACKGROUNDS
       ===================================================== */

    --tv-white: #FFFFFF;
    --tv-bg-soft: #F6F8FA;
    --tv-bg-muted: #EEF2F4;


    /* =====================================================
       3. TEXT
       ===================================================== */

    --tv-text: #17212B;
    --tv-text-secondary: #5E6B76;
    --tv-text-light: #7A8791;
    --tv-text-white: #FFFFFF;


    /* =====================================================
       4. BORDERS
       ===================================================== */

    --tv-border: #E3E8EC;
    --tv-border-dark: #CBD4DA;


    /* =====================================================
       5. STATUS
       ===================================================== */

    --tv-success: #167A55;
    --tv-error: #C0392B;


    /* =====================================================
       6. TYPOGRAPHY
       ===================================================== */

    --tv-font-primary: "Manrope", sans-serif;

    --tv-text-xs: 0.8125rem;       /* 13px */
    --tv-text-sm: 0.875rem;        /* 14px */
    --tv-text-base: 1.0625rem;     /* 17px */
    --tv-text-lg: 1.125rem;        /* 18px */

    --tv-text-xl: 1.375rem;        /* 22px */
    --tv-text-2xl: 1.75rem;        /* 28px */
    --tv-text-3xl: 2.5rem;         /* 40px */
    --tv-text-4xl: 3.25rem;        /* 52px */
    --tv-text-hero: 4rem;          /* 64px */


    /* =====================================================
       7. FONT WEIGHTS
       ===================================================== */

    --tv-weight-regular: 400;
    --tv-weight-medium: 500;
    --tv-weight-semibold: 600;
    --tv-weight-bold: 700;


    /* =====================================================
       8. LAYOUT
       ===================================================== */

    --tv-container: 1240px;
    --tv-container-narrow: 900px;
    --tv-content: 760px;
    --tv-header-height: 78px;


    /* =====================================================
       9. SPACING
       ===================================================== */

    --tv-space-1: 0.5rem;          /* 8px */
    --tv-space-2: 1rem;            /* 16px */
    --tv-space-3: 1.5rem;          /* 24px */
    --tv-space-4: 2rem;            /* 32px */
    --tv-space-5: 2.5rem;          /* 40px */
    --tv-space-6: 3rem;            /* 48px */
    --tv-space-7: 4rem;            /* 64px */
    --tv-space-8: 5rem;            /* 80px */
    --tv-space-9: 6rem;            /* 96px */
    --tv-space-10: 7.5rem;         /* 120px */


    /* =====================================================
       10. RADIUS
       ===================================================== */

    --tv-radius-sm: 8px;
    --tv-radius-md: 10px;
    --tv-radius-lg: 16px;
    --tv-radius-xl: 18px;
    --tv-radius-pill: 999px;


    /* =====================================================
       11. SHADOWS
       ===================================================== */

    --tv-shadow-sm:
        0 4px 16px rgba(7, 26, 43, 0.05);

    --tv-shadow-md:
        0 12px 32px rgba(7, 26, 43, 0.08);

    --tv-shadow-lg:
        0 20px 50px rgba(7, 26, 43, 0.12);


    /* =====================================================
       12. TRANSITIONS
       ===================================================== */

    --tv-transition-fast: 180ms ease;
    --tv-transition: 280ms ease;
    --tv-transition-slow: 450ms ease;


    /* =====================================================
       13. ACCESSIBILITY
       ===================================================== */

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


    /* =====================================================
       14. Z-INDEX
       ===================================================== */

    --tv-z-header: 1000;
    --tv-z-mobile-menu: 1050;
    --tv-z-overlay: 1100;
    --tv-z-modal: 1200;
}