/* ==========================================================================
   VELIYATH GOLD & DIAMONDS
   FRONTEND — GLOBAL DESIGN VARIABLES
   Luxury Editorial Jewellery Design System
   ========================================================================== */

:root {

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

    --color-primary: #7d1836;
    --color-primary-dark: #64122b;
    --color-primary-light: #982c4a;

    --color-gold: #b08d3c;
    --color-gold-dark: #92742c;
    --color-gold-light: #c7a85d;

    --color-maroon: #421223;
    --color-maroon-dark: #2f0c19;
    --color-maroon-light: #5a1b31;


    /* ======================================================================
       EDITORIAL / LUXURY ACCENTS
       ====================================================================== */

    --color-champagne: #d8c49a;
    --color-ivory: #f8f5ef;
    --color-cream: #f3eee5;
    --color-sand: #e9e0d3;

    --color-gold-border: rgba(176, 141, 60, 0.28);
    --color-gold-soft: rgba(176, 141, 60, 0.08);
    --color-maroon-soft: rgba(66, 18, 35, 0.06);


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

    --color-text: #25211f;
    --color-text-dark: #181514;
    --color-text-muted: #6f6863;
    --color-text-light: #96908a;

    --color-text-white: #ffffff;
    --color-text-on-dark: #f8f5ef;
    --color-text-on-gold: #241c10;


    /* ======================================================================
       BACKGROUND COLORS
       ====================================================================== */

    --color-background: #ffffff;
    --color-background-soft: #faf9f7;
    --color-background-light: #f7f4ef;

    --color-background-cream: #f4efe7;
    --color-background-ivory: #fbf9f5;

    --color-background-dark: #421223;
    --color-background-darkest: #2f0c19;

    --color-surface: #ffffff;
    --color-surface-soft: #fbfaf8;
    --color-surface-warm: #f8f4ed;


    /* ======================================================================
       BORDER COLORS
       ====================================================================== */

    --color-border: #e4dfd8;
    --color-border-light: #eeeae4;
    --color-border-dark: #d2cbc2;

    --color-border-gold: rgba(176, 141, 60, 0.32);
    --color-border-maroon: rgba(66, 18, 35, 0.16);


    /* ======================================================================
       STATUS COLORS
       ====================================================================== */

    --color-success: #28733a;
    --color-success-light: #edf7ef;

    --color-danger: #ad2b24;
    --color-danger-light: #fff1f0;

    --color-warning: #a86f1c;
    --color-warning-light: #fff8e9;

    --color-info: #315fa8;
    --color-info-light: #eff5fc;


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

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

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

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

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


    /* ======================================================================
       FONT SIZES (Refined Editorial Scale)
       ====================================================================== */

    --font-size-xs: 10px;
    --font-size-sm: 11.5px;
    --font-size-md: 13px;
    --font-size-lg: 15px;

    --font-size-xl: 17px;
    --font-size-2xl: 20px;
    --font-size-3xl: 25px;
    --font-size-4xl: 30px;
    --font-size-5xl: 38px;
    --font-size-6xl: 46px;


    /* ======================================================================
       RESPONSIVE DISPLAY SIZES
       ====================================================================== */

    --font-display-sm: 27px;
    --font-display-md: 34px;
    --font-display-lg: 42px;
    --font-display-xl: 50px;


    /* ======================================================================
       FONT WEIGHTS
       ====================================================================== */

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


    /* ======================================================================
       LETTER SPACING
       ====================================================================== */

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    --letter-spacing-wider: 0.08em;
    --letter-spacing-luxury: 0.14em;


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

    --line-height-none: 1;
    --line-height-tight: 1.15;
    --line-height-heading: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.85;


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

    --container-width: 1240px;
    --container-wide: 1380px;
    --container-narrow: 1060px;

    --container-padding: 24px;


    /* ======================================================================
       SECTION SPACING
       ====================================================================== */

    --section-space-sm: 52px;
    --section-space-md: 68px;
    --section-space-lg: 84px;
    --section-space-xl: 104px;


    /* ======================================================================
       GENERAL SPACING
       ====================================================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 44px;
    --space-11: 52px;
    --space-12: 60px;
    --space-13: 68px;
    --space-14: 76px;
    --space-15: 88px;
    --space-16: 104px;


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

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;

    --radius-pill: 999px;


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

    --shadow-xs:
        0 1px 4px rgba(25, 18, 14, 0.035);

    --shadow-sm:
        0 4px 16px rgba(25, 18, 14, 0.055);

    --shadow-md:
        0 10px 30px rgba(25, 18, 14, 0.075);

    --shadow-lg:
        0 18px 48px rgba(25, 18, 14, 0.095);

    --shadow-xl:
        0 28px 70px rgba(25, 18, 14, 0.12);

    --shadow-gold:
        0 10px 30px rgba(176, 141, 60, 0.14);


    /* ======================================================================
       HEADER
       ====================================================================== */

    --header-height: 74px;
    --header-mobile-height: 60px;

    --header-border: rgba(66, 18, 35, 0.10);


    /* ======================================================================
       BUTTONS
       ====================================================================== */

    --button-height-sm: 34px;
    --button-height-md: 40px;
    --button-height-lg: 46px;

    --button-padding-x: 20px;

    --button-radius: 4px;


    /* ======================================================================
       FORMS
       ====================================================================== */

    --input-height: 42px;
    --input-radius: 4px;

    --input-border: #ddd7cf;
    --input-border-focus: #b08d3c;


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

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-luxury: 0.6s cubic-bezier(0.22, 1, 0.36, 1);


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

    --z-header: 1000;
    --z-dropdown: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-toast: 1400;


    /* ======================================================================
       BREAKPOINTS
       ====================================================================== */

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


/* ==========================================================================
   RESPONSIVE VARIABLE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1200px) {

    :root {
        --container-padding: 22px;

        --font-display-lg: 38px;
        --font-display-xl: 46px;

        --section-space-lg: 76px;
        --section-space-xl: 90px;
    }
}


@media (max-width: 768px) {

    :root {
        --container-padding: 18px;

        --font-size-3xl: 23px;
        --font-size-4xl: 28px;
        --font-size-5xl: 33px;
        --font-size-6xl: 38px;

        --font-display-sm: 24px;
        --font-display-md: 29px;
        --font-display-lg: 34px;
        --font-display-xl: 39px;

        --section-space-sm: 40px;
        --section-space-md: 52px;
        --section-space-lg: 64px;
        --section-space-xl: 76px;

        --header-height: 66px;
    }
}


@media (max-width: 480px) {

    :root {
        --container-padding: 16px;

        --font-size-2xl: 18.5px;
        --font-size-3xl: 22px;
        --font-size-4xl: 25px;
        --font-size-5xl: 30px;
        --font-size-6xl: 34px;

        --font-display-sm: 22px;
        --font-display-md: 26px;
        --font-display-lg: 30px;
        --font-display-xl: 34px;

        --section-space-sm: 36px;
        --section-space-md: 44px;
        --section-space-lg: 56px;
        --section-space-xl: 68px;

        --button-height-md: 38px;
        --button-padding-x: 16px;
    }
}