/* ==========================================================================
   INAIVOM - Design System Variables
   File: app/static/css/variables.css
   Premium Matrimony Platform
   Theme: Maroon #800020 | Gold #D4AF37 | White
   ========================================================================== */

:root {

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

    --inaivom-primary: #800020;
    --inaivom-primary-dark: #650019;
    --inaivom-primary-deep: #4d0013;
    --inaivom-primary-light: #9b1738;
    --inaivom-primary-lighter: #b84a65;

    --inaivom-primary-rgb: 128, 0, 32;

    --inaivom-gold: #d4af37;
    --inaivom-gold-dark: #aa881f;
    --inaivom-gold-deep: #876b11;
    --inaivom-gold-light: #ead77f;
    --inaivom-gold-lighter: #f4e9b8;
    --inaivom-gold-soft: #fff8df;

    --inaivom-gold-rgb: 212, 175, 55;

    --inaivom-white: #ffffff;
    --inaivom-black: #171315;


    /* ======================================================================
       2. BACKGROUND COLORS
       ====================================================================== */

    --inaivom-background: #ffffff;
    --inaivom-background-soft: #fdfafb;
    --inaivom-background-muted: #f8f5f6;
    --inaivom-background-deep: #f2edef;

    --inaivom-surface: #ffffff;
    --inaivom-surface-soft: #fdfafb;
    --inaivom-surface-muted: #faf7f8;

    --inaivom-overlay:
        rgba(25, 12, 17, 0.55);

    --inaivom-overlay-light:
        rgba(25, 12, 17, 0.28);

    --inaivom-overlay-dark:
        rgba(25, 12, 17, 0.75);


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

    --inaivom-text: #2e292c;
    --inaivom-text-dark: #211d1f;
    --inaivom-text-soft: #554d51;
    --inaivom-muted: #7b7277;
    --inaivom-light-muted: #a59ca1;
    --inaivom-placeholder: #a59ca1;

    --inaivom-text-on-primary: #ffffff;
    --inaivom-text-on-gold: #2b2207;


    /* ======================================================================
       4. BORDER COLORS
       ====================================================================== */

    --inaivom-border: #ebe4e7;
    --inaivom-border-light: #f2edef;
    --inaivom-border-dark: #d9cfd3;

    --inaivom-border-primary:
        rgba(128, 0, 32, 0.22);

    --inaivom-border-gold:
        rgba(212, 175, 55, 0.45);


    /* ======================================================================
       5. SEMANTIC COLORS
       ====================================================================== */

    --inaivom-success: #198754;
    --inaivom-success-dark: #146c43;
    --inaivom-success-light: #dff3e8;

    --inaivom-danger: #dc3545;
    --inaivom-danger-dark: #b52a37;
    --inaivom-danger-light: #fbe5e8;

    --inaivom-warning: #c48700;
    --inaivom-warning-dark: #966800;
    --inaivom-warning-light: #fff1cf;

    --inaivom-info: #2878a5;
    --inaivom-info-dark: #205f83;
    --inaivom-info-light: #e2f1f9;


    /* ======================================================================
       6. STATUS COLORS
       ====================================================================== */

    --status-active: #198754;
    --status-online: #22a06b;
    --status-offline: #8f878b;

    --status-pending: #c48700;
    --status-processing: #2878a5;

    --status-failed: #dc3545;
    --status-blocked: #b52a37;

    --status-verified: #800020;
    --status-premium: #a47c10;


    /* ======================================================================
       7. TYPOGRAPHY
       ====================================================================== */

    --font-primary:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-heading:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --font-system:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-monospace:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;


    /* ======================================================================
       8. FONT SIZES
       ====================================================================== */

    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;


    /* ======================================================================
       9. FONT WEIGHTS
       ====================================================================== */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* ======================================================================
       10. LINE HEIGHTS
       ====================================================================== */

    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;
    --line-height-loose: 1.8;


    /* ======================================================================
       11. LETTER SPACING
       ====================================================================== */

    --letter-spacing-tighter: -0.04em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;


    /* ======================================================================
       12. SPACING SCALE
       ====================================================================== */

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;


    /* ======================================================================
       13. BORDER RADIUS
       ====================================================================== */

    --inaivom-radius-xs: 4px;
    --inaivom-radius-sm: 8px;
    --inaivom-radius: 12px;
    --inaivom-radius-md: 14px;
    --inaivom-radius-lg: 18px;
    --inaivom-radius-xl: 24px;
    --inaivom-radius-2xl: 32px;
    --inaivom-radius-pill: 999px;
    --inaivom-radius-circle: 50%;


    /* ======================================================================
       14. SHADOWS
       ====================================================================== */

    --inaivom-shadow-xs:
        0 1px 4px rgba(45, 24, 33, 0.04);

    --inaivom-shadow-sm:
        0 3px 12px rgba(45, 24, 33, 0.05);

    --inaivom-shadow:
        0 10px 30px rgba(45, 24, 33, 0.08);

    --inaivom-shadow-md:
        0 14px 38px rgba(45, 24, 33, 0.09);

    --inaivom-shadow-lg:
        0 20px 55px rgba(45, 24, 33, 0.12);

    --inaivom-shadow-xl:
        0 28px 70px rgba(45, 24, 33, 0.15);

    --inaivom-shadow-primary:
        0 12px 30px rgba(128, 0, 32, 0.18);

    --inaivom-shadow-gold:
        0 12px 30px rgba(170, 136, 31, 0.18);


    /* ======================================================================
       15. TRANSITIONS
       ====================================================================== */

    --inaivom-transition-fast:
        120ms cubic-bezier(0.4, 0, 0.2, 1);

    --inaivom-transition:
        200ms cubic-bezier(0.4, 0, 0.2, 1);

    --inaivom-transition-medium:
        300ms cubic-bezier(0.4, 0, 0.2, 1);

    --inaivom-transition-slow:
        450ms cubic-bezier(0.4, 0, 0.2, 1);

    --inaivom-ease:
        cubic-bezier(0.4, 0, 0.2, 1);

    --inaivom-ease-out:
        cubic-bezier(0, 0, 0.2, 1);

    --inaivom-ease-in:
        cubic-bezier(0.4, 0, 1, 1);


    /* ======================================================================
       16. Z-INDEX SYSTEM
       ====================================================================== */

    --z-base: 1;
    --z-content: 10;
    --z-sticky: 100;
    --z-navbar: 500;
    --z-dropdown: 1000;
    --z-overlay: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-critical: 9999;


    /* ======================================================================
       17. CONTAINER WIDTHS
       ====================================================================== */

    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;

    --container-padding: 1rem;


    /* ======================================================================
       18. BREAKPOINT REFERENCES
       Note: CSS custom properties cannot be used directly in @media rules.
       These are reference values for JS/design consistency.
       ====================================================================== */

    --breakpoint-xs: 0px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;


    /* ======================================================================
       19. NAVBAR
       ====================================================================== */

    --navbar-height: 72px;
    --navbar-height-mobile: 64px;

    --navbar-background: #ffffff;
    --navbar-text: #554d51;
    --navbar-active: #800020;

    --navbar-border:
        #f0eaec;

    --navbar-shadow:
        0 4px 20px rgba(45, 24, 33, 0.05);


    /* ======================================================================
       20. SIDEBAR
       ====================================================================== */

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 78px;

    --sidebar-background: #ffffff;
    --sidebar-text: #554d51;
    --sidebar-muted: #8b8287;

    --sidebar-active-background:
        rgba(128, 0, 32, 0.06);

    --sidebar-active-text:
        #800020;

    --sidebar-border:
        #ebe4e7;


    /* ======================================================================
       21. FOOTER
       ====================================================================== */

    --footer-background: #4d0013;
    --footer-background-dark: #3d000f;

    --footer-text:
        rgba(255, 255, 255, 0.78);

    --footer-muted:
        rgba(255, 255, 255, 0.58);

    --footer-heading: #ffffff;

    --footer-link:
        rgba(255, 255, 255, 0.76);

    --footer-link-hover:
        #ead77f;

    --footer-border:
        rgba(255, 255, 255, 0.12);


    /* ======================================================================
       22. BUTTONS
       ====================================================================== */

    --button-height-sm: 34px;
    --button-height: 42px;
    --button-height-lg: 50px;

    --button-padding-sm:
        0.4rem 0.75rem;

    --button-padding:
        0.55rem 1rem;

    --button-padding-lg:
        0.7rem 1.25rem;

    --button-radius:
        10px;

    --button-radius-pill:
        999px;


    /* ======================================================================
       23. FORMS
       ====================================================================== */

    --input-height: 44px;
    --input-height-sm: 38px;
    --input-height-lg: 50px;

    --input-background: #ffffff;

    --input-border:
        #ddd4d8;

    --input-border-hover:
        #cbbec4;

    --input-border-focus:
        #800020;

    --input-text:
        #2e292c;

    --input-placeholder:
        #a59ca1;

    --input-radius:
        10px;

    --input-shadow-focus:
        0 0 0 3px rgba(128, 0, 32, 0.09);


    /* ======================================================================
       24. CARDS
       ====================================================================== */

    --card-background: #ffffff;

    --card-border:
        #ebe4e7;

    --card-radius:
        18px;

    --card-padding:
        1.25rem;

    --card-shadow:
        0 3px 12px rgba(45, 24, 33, 0.05);

    --card-shadow-hover:
        0 14px 36px rgba(45, 24, 33, 0.10);


    /* ======================================================================
       25. MODAL
       ====================================================================== */

    --modal-background: #ffffff;

    --modal-border:
        #ebe4e7;

    --modal-radius:
        18px;

    --modal-shadow:
        0 25px 70px rgba(25, 12, 17, 0.22);

    --modal-backdrop:
        rgba(25, 12, 17, 0.55);


    /* ======================================================================
       26. TABLES
       ====================================================================== */

    --table-background: #ffffff;

    --table-header-background:
        #faf8f9;

    --table-border:
        #ebe4e7;

    --table-row-hover:
        #fdfafb;

    --table-text:
        #554d51;

    --table-heading:
        #4a4246;


    /* ======================================================================
       27. ALERTS
       ====================================================================== */

    --alert-success-background: #edf8f2;
    --alert-success-border: #c7ead7;
    --alert-success-text: #146c43;

    --alert-danger-background: #fff0f2;
    --alert-danger-border: #f3c8ce;
    --alert-danger-text: #b52a37;

    --alert-warning-background: #fff8e8;
    --alert-warning-border: #f2dfac;
    --alert-warning-text: #8b6100;

    --alert-info-background: #eef7fc;
    --alert-info-border: #c9e5f4;
    --alert-info-text: #205f83;


    /* ======================================================================
       28. PROFILE CARDS
       ====================================================================== */

    --profile-card-radius: 18px;

    --profile-card-background:
        #ffffff;

    --profile-card-border:
        #ebe4e7;

    --profile-card-shadow:
        0 5px 18px rgba(45, 24, 33, 0.06);

    --profile-card-shadow-hover:
        0 16px 42px rgba(45, 24, 33, 0.12);

    --profile-photo-background:
        #eee8ea;


    /* ======================================================================
       29. MATCH / RECOMMENDATION
       ====================================================================== */

    --match-high: #198754;
    --match-medium: #c48700;
    --match-low: #7b7277;

    --match-score-background:
        rgba(128, 0, 32, 0.06);

    --match-score-text:
        #800020;


    /* ======================================================================
       30. VERIFICATION
       ====================================================================== */

    --verified-background:
        rgba(128, 0, 32, 0.07);

    --verified-text:
        #800020;

    --verified-border:
        rgba(128, 0, 32, 0.18);

    --verification-pending-background:
        rgba(196, 135, 0, 0.09);

    --verification-pending-text:
        #966800;


    /* ======================================================================
       31. PREMIUM MEMBERSHIP
       ====================================================================== */

    --premium-background:
        #fff9e8;

    --premium-border:
        rgba(212, 175, 55, 0.55);

    --premium-text:
        #765b09;

    --premium-gradient:
        linear-gradient(
            135deg,
            #f0d46e 0%,
            #d4af37 48%,
            #aa881f 100%
        );

    --premium-dark-gradient:
        linear-gradient(
            135deg,
            #876b11,
            #d4af37
        );


    /* ======================================================================
       32. BRAND GRADIENTS
       ====================================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #800020 0%,
            #650019 100%
        );

    --gradient-primary-deep:
        linear-gradient(
            135deg,
            #4d0013 0%,
            #800020 100%
        );

    --gradient-gold:
        linear-gradient(
            135deg,
            #ead77f 0%,
            #d4af37 50%,
            #aa881f 100%
        );

    --gradient-premium:
        linear-gradient(
            135deg,
            #800020 0%,
            #9b1738 55%,
            #aa881f 100%
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            #fffdfd 0%,
            #fdf8fa 50%,
            #fffaf1 100%
        );

    --gradient-card:
        linear-gradient(
            145deg,
            #ffffff,
            #fdfafb
        );


    /* ======================================================================
       33. GLASS EFFECTS
       ====================================================================== */

    --glass-background:
        rgba(255, 255, 255, 0.82);

    --glass-background-strong:
        rgba(255, 255, 255, 0.94);

    --glass-border:
        rgba(255, 255, 255, 0.65);

    --glass-blur:
        14px;


    /* ======================================================================
       34. CHAT
       ====================================================================== */

    --chat-background:
        #fcfafb;

    --chat-sidebar-background:
        #ffffff;

    --chat-received-background:
        #ffffff;

    --chat-received-text:
        #2e292c;

    --chat-sent-background:
        #800020;

    --chat-sent-text:
        #ffffff;

    --chat-border:
        #ebe4e7;


    /* ======================================================================
       35. NOTIFICATIONS
       ====================================================================== */

    --notification-unread-background:
        rgba(128, 0, 32, 0.025);

    --notification-hover-background:
        #fdfafb;

    --notification-dot:
        #800020;


    /* ======================================================================
       36. SKELETON / LOADING
       ====================================================================== */

    --skeleton-background:
        #eee9eb;

    --skeleton-highlight:
        rgba(255, 255, 255, 0.75);

    --loader-color:
        #800020;

    --loader-track:
        rgba(128, 0, 32, 0.12);


    /* ======================================================================
       37. FOCUS STATES
       ====================================================================== */

    --focus-color:
        #800020;

    --focus-ring:
        0 0 0 3px rgba(128, 0, 32, 0.12);

    --focus-ring-gold:
        0 0 0 3px rgba(212, 175, 55, 0.18);


    /* ======================================================================
       38. SCROLLBAR
       ====================================================================== */

    --scrollbar-width: 8px;

    --scrollbar-track:
        #f5f1f3;

    --scrollbar-thumb:
        #c9bec3;

    --scrollbar-thumb-hover:
        #a89ba1;


    /* ======================================================================
       39. IMAGE RATIOS
       ====================================================================== */

    --ratio-square: 1 / 1;
    --ratio-profile: 4 / 5;
    --ratio-landscape: 16 / 9;
    --ratio-story: 16 / 10;
    --ratio-banner: 21 / 9;


    /* ======================================================================
       40. CONTENT WIDTHS
       ====================================================================== */

    --content-narrow: 680px;
    --content-reading: 820px;
    --content-medium: 960px;
    --content-wide: 1200px;


    /* ======================================================================
       41. AUTHENTICATION
       ====================================================================== */

    --auth-card-width: 480px;

    --auth-background:
        linear-gradient(
            135deg,
            #fffdfd,
            #fdf8fa,
            #fffaf1
        );

    --auth-card-background:
        rgba(255, 255, 255, 0.96);


    /* ======================================================================
       42. DASHBOARD
       ====================================================================== */

    --dashboard-background:
        #faf8f9;

    --dashboard-card-background:
        #ffffff;

    --dashboard-border:
        #ebe4e7;


    /* ======================================================================
       43. ADMIN
       ====================================================================== */

    --admin-background:
        #f8f6f7;

    --admin-sidebar-background:
        #4d0013;

    --admin-sidebar-text:
        rgba(255, 255, 255, 0.76);

    --admin-sidebar-active:
        #ffffff;

    --admin-sidebar-active-background:
        rgba(212, 175, 55, 0.15);

    --admin-header-background:
        #ffffff;

    --admin-card-background:
        #ffffff;


    /* ======================================================================
       44. TOOLTIP / POPOVER
       ====================================================================== */

    --tooltip-background:
        #2e292c;

    --tooltip-text:
        #ffffff;

    --popover-background:
        #ffffff;

    --popover-border:
        #ebe4e7;

    --popover-shadow:
        0 15px 40px rgba(45, 24, 33, 0.14);


    /* ======================================================================
       45. COOKIE BANNER
       ====================================================================== */

    --cookie-background:
        rgba(255, 255, 255, 0.97);

    --cookie-border:
        #ebe4e7;

    --cookie-shadow:
        0 20px 55px rgba(45, 24, 33, 0.14);


    /* ======================================================================
       46. GLOBAL COMPONENT SIZES
       ====================================================================== */

    --icon-xs: 16px;
    --icon-sm: 20px;
    --icon-md: 24px;
    --icon-lg: 32px;
    --icon-xl: 48px;

    --avatar-xs: 28px;
    --avatar-sm: 36px;
    --avatar-md: 48px;
    --avatar-lg: 64px;
    --avatar-xl: 96px;


    /* ======================================================================
       47. LAYOUT
       ====================================================================== */

    --page-section-padding:
        4.5rem;

    --page-section-padding-mobile:
        3rem;

    --content-gap:
        1.5rem;

    --grid-gap:
        1.25rem;


    /* ======================================================================
       48. SAFE AREA
       ====================================================================== */

    --safe-area-top:
        env(safe-area-inset-top, 0px);

    --safe-area-right:
        env(safe-area-inset-right, 0px);

    --safe-area-bottom:
        env(safe-area-inset-bottom, 0px);

    --safe-area-left:
        env(safe-area-inset-left, 0px);


    /* ======================================================================
       49. LEGACY / GENERIC ALIASES
       Keep compatibility across existing INAIVOM templates and CSS.
       ====================================================================== */

    --primary-color: var(--inaivom-primary);
    --primary-dark: var(--inaivom-primary-dark);
    --primary-light: var(--inaivom-primary-light);

    --secondary-color: var(--inaivom-gold);
    --secondary-dark: var(--inaivom-gold-dark);
    --secondary-light: var(--inaivom-gold-light);

    --gold: var(--inaivom-gold);
    --maroon: var(--inaivom-primary);

    --white: var(--inaivom-white);
    --black: var(--inaivom-black);

    --text-color: var(--inaivom-text);
    --text-muted: var(--inaivom-muted);

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

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

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

    --border-radius: var(--inaivom-radius);
    --border-radius-lg: var(--inaivom-radius-lg);

    --box-shadow: var(--inaivom-shadow);
    --box-shadow-sm: var(--inaivom-shadow-sm);
    --box-shadow-lg: var(--inaivom-shadow-lg);

    --transition: var(--inaivom-transition);
}


/* ==========================================================================
   50. RESPONSIVE VARIABLE OVERRIDES
   ========================================================================== */

@media (max-width: 991.98px) {

    :root {
        --container-padding: 1.25rem;

        --page-section-padding:
            3.75rem;

        --content-gap:
            1.25rem;
    }
}

@media (max-width: 767.98px) {

    :root {
        --container-padding: 1rem;

        --page-section-padding:
            3rem;

        --content-gap:
            1rem;

        --grid-gap:
            1rem;

        --card-padding:
            1rem;
    }
}

@media (max-width: 575.98px) {

    :root {
        --container-padding: 0.875rem;

        --page-section-padding:
            2.5rem;

        --page-section-padding-mobile:
            2.5rem;

        --navbar-height:
            64px;

        --card-radius:
            14px;

        --profile-card-radius:
            14px;
    }
}


/* ==========================================================================
   51. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    :root {
        --inaivom-transition-fast: 0ms;
        --inaivom-transition: 0ms;
        --inaivom-transition-medium: 0ms;
        --inaivom-transition-slow: 0ms;
    }
}


/* ==========================================================================
   END OF VARIABLES
   ========================================================================== */