/* =========================================================
   ADI YOGPEETH — GLOBAL DESIGN TOKENS
   File: assets/css/variables.css
   Version: 1.1
   ========================================================= */

:root {

    /* =====================================================
       01. BRAND COLORS
       ===================================================== */

    --color-forest: #173F35;
    --color-ivory: #FAF8F3;
    --color-sand: #F4EFE6;
    --color-terracotta: #B86A4B;
    --color-sage: #829487;
    --color-gold: #B79A63;
    --color-charcoal: #252825;


    /* =====================================================
       02. EXTENDED COLOR SYSTEM
       ===================================================== */

    /* Forest variations */
    --color-forest-dark: #102F28;
    --color-forest-light: #245448;

    /* Ivory variations */
    --color-ivory-soft: #FCFBF7;
    --color-ivory-dark: #F0EDE4;

    /* Sand variations */
    --color-sand-light: #F8F4EC;
    --color-sand-dark: #E9E1D3;

    /* Terracotta variations */
    --color-terracotta-dark: #96533B;
    --color-terracotta-light: #C9856C;

    /* Sage variations */
    --color-sage-dark: #66786B;
    --color-sage-light: #A5B2A7;

    /* Gold variations */
    --color-gold-dark: #947B4D;
    --color-gold-light: #CCB98B;

    /* Text */
    --color-text-primary: var(--color-charcoal);
    --color-text-secondary: #5E625E;
    --color-text-muted: #777B76;
    --color-text-light: #A1A49F;

    /* White / Black */
    --color-white: #FFFFFF;
    --color-black: #000000;


    /* =====================================================
       03. SEMANTIC COLORS
       ===================================================== */

    --color-background: var(--color-ivory);
    --color-background-soft: var(--color-ivory-soft);
    --color-background-alt: var(--color-sand);

    --color-heading: var(--color-forest);
    --color-body: var(--color-charcoal);

    --color-primary: var(--color-forest);
    --color-primary-hover: var(--color-forest-dark);
    --color-link: var(--color-forest);
    --color-link-hover: var(--color-gold);
    --color-link-on-dark: var(--color-ivory);
    --color-link-on-dark-hover: var(--color-gold-light);

    --color-accent: var(--color-terracotta);
    --color-accent-hover: var(--color-terracotta-dark);

    --color-border: rgba(23, 63, 53, 0.12);
    --color-border-light: rgba(23, 63, 53, 0.08);
    --color-border-dark: rgba(23, 63, 53, 0.20);


    /* =====================================================
       04. DARK SECTION COLORS
       ===================================================== */

    --color-dark-background: var(--color-forest);
    --color-dark-background-deep: var(--color-forest-dark);

    --color-dark-heading: var(--color-ivory);
    --color-dark-body: rgba(250, 248, 243, 0.78);
    --color-dark-muted: rgba(250, 248, 243, 0.58);

    --color-dark-border: rgba(250, 248, 243, 0.14);


    /* =====================================================
       05. TYPOGRAPHY
       ===================================================== */

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

    --font-body:
        "PT Serif",
        Georgia,
        "Times New Roman",
        serif;
}


    /* =====================================================
       06. FONT WEIGHTS
       ===================================================== */

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


    /* =====================================================
       07. DISPLAY TYPOGRAPHY SCALE
       ===================================================== */

    --text-display-xl: clamp(4rem, 7vw, 6.5rem);
    --text-display-lg: clamp(3.25rem, 5.5vw, 5.25rem);
    --text-display-md: clamp(2.75rem, 4.5vw, 4.25rem);
    --text-display-sm: clamp(2.125rem, 3.5vw, 3.125rem);


    /* =====================================================
       08. HEADING SCALE
       ===================================================== */

    --text-h1: 3.5rem; /* 56px — homepage master H1 */
    --text-h2: 2.75rem; /* 44px — homepage master H2 */
    --text-h3: 2rem; /* 32px — homepage master H3 */
    --text-h4: 1.5625rem; /* 25px — homepage master H4 */
    --text-h5: 1.3125rem; /* 21px — homepage master H5 */
    --text-h6: 1.125rem; /* 18px — homepage master H6 */


    /* =====================================================
       09. BODY TYPOGRAPHY
       ===================================================== */

    /*
       Updated for improved website-wide readability.

       Previous:
       Body XL  = 20px
       Body LG  = 18px
       Body     = 16px
       Body SM  = 15px
       Body XS  = 13px

       Updated:
       Body XL  = 21px
       Body LG  = 19px
       Body     = 17px
       Body SM  = 15px
       Body XS  = 14px
    */

    --text-body-xl: 1.3125rem; /* 21px */
    --text-body-lg: 1.1875rem; /* 19px */
    --text-body: 1.0625rem; /* 17px — homepage master body */
    --text-body-sm: 0.9375rem; /* 15px */
    --text-body-xs: 0.875rem; /* 14px */

    /* Mobile typography targets */
    --text-body-mobile: 1rem; /* 16px */
    --text-body-sm-mobile: 0.9375rem; /* 15px */
    --text-h1-mobile: 2.5rem; /* 40px */
    --text-h2-mobile: 2.125rem; /* 34px */
    --text-h3-mobile: 1.6875rem; /* 27px */
    --text-h4-mobile: 1.375rem; /* 22px */
    --text-h5-mobile: 1.1875rem; /* 19px */
    --text-h6-mobile: 1.0625rem; /* 17px */


    /* =====================================================
       10. LINE HEIGHT
       ===================================================== */

    --line-height-none: 1;
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.85;


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

    --tracking-tighter: -0.025em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.12em;


    /* =====================================================
       12. LAYOUT — CONTAINERS
       ===================================================== */

    --container-xs: 540px;
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1140px;
    --container-xl: 1280px;
    --container-xxl: 1360px;

    --container-padding: 20px;

    /* Mobile-first layout gutters */
    --container-padding-mobile: 20px;
    --container-padding-small: 16px;

    /* Comfortable content width for long-form reading */
    --content-reading-ch: 68ch;


    /* =====================================================
       13. SECTION SPACING
       ===================================================== */

    --section-space-xs: 40px;
    --section-space-sm: 56px;
    --section-space-md: 88px;
    --section-space-lg: 112px;
    --section-space-xl: 136px;


    /* =====================================================
       14. COMPONENT 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: 40px;
    --space-10: 48px;
    --space-11: 56px;
    --space-12: 64px;
    --space-13: 80px;
    --space-14: 96px;
    --space-15: 120px;
    --space-16: 144px;


    /* =====================================================
       15. BORDER RADIUS
       ===================================================== */

    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;


    /* =====================================================
       16. BORDERS
       ===================================================== */

    --border-width-thin: 1px;
    --border-width-medium: 2px;

    --border-default:
        var(--border-width-thin)
        solid
        var(--color-border);

    --border-light:
        var(--border-width-thin)
        solid
        var(--color-border-light);

    --border-dark:
        var(--border-width-thin)
        solid
        var(--color-border-dark);


    /* =====================================================
       17. SHADOWS
       ===================================================== */

    --shadow-none: none;

    --shadow-xs:
        0 1px 3px rgba(23, 63, 53, 0.04);

    --shadow-sm:
        0 4px 12px rgba(23, 63, 53, 0.06);

    --shadow-md:
        0 8px 24px rgba(23, 63, 53, 0.08);

    --shadow-lg:
        0 16px 40px rgba(23, 63, 53, 0.10);

    --shadow-xl:
        0 24px 60px rgba(23, 63, 53, 0.12);


    /* =====================================================
       18. TRANSITIONS
       ===================================================== */

    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    --ease-standard:
        cubic-bezier(0.2, 0.65, 0.3, 1);

    --ease-smooth:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-linear: linear;


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

    --z-base: 1;
    --z-content: 10;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;


    /* =====================================================
       20. HEADER
       ===================================================== */

    --header-utility-height: 38px;
    --header-main-height: 82px;
    --header-total-height: 120px;

    --header-mobile-height: 72px;


    /* =====================================================
       21. HERO
       ===================================================== */

    --hero-min-height: 680px;
    --hero-height: min(88vh, 900px);

    --hero-overlay-light:
        rgba(23, 63, 53, 0.18);

    --hero-overlay-medium:
        rgba(23, 63, 53, 0.38);

    --hero-overlay-dark:
        rgba(16, 47, 40, 0.58);


    /* =====================================================
       22. FORM CONTROLS
       ===================================================== */

    --input-height: 52px;
    --input-height-lg: 58px;

    --input-padding-x: 16px;

    --input-background: var(--color-white);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-forest);

    --input-radius: var(--radius-sm);


    /* =====================================================
       23. BUTTONS
       ===================================================== */

    --button-height-sm: 40px;
    --button-height-md: 48px;
    --button-height-lg: 56px;

    --button-padding-x-sm: 18px;
    --button-padding-x-md: 24px;
    --button-padding-x-lg: 30px;

    --button-radius: var(--radius-sm);

    /* Touch / interaction */
    --touch-target-min: 44px;
    --focus-offset: 3px;


    /* =====================================================
       24. IMAGES
       ===================================================== */

    --image-radius: var(--radius-lg);

    --image-overlay:
        linear-gradient(
            180deg,
            rgba(16, 47, 40, 0.05) 0%,
            rgba(16, 47, 40, 0.60) 100%
        );


    /* =====================================================
       25. CONTENT WIDTHS
       ===================================================== */

    --content-reading-width: 720px;
    --content-narrow-width: 860px;
    --content-wide-width: 1120px;


    /* =====================================================
       26. ACCESSIBILITY
       ===================================================== */

    --focus-ring:
        0 0 0 3px rgba(184, 106, 75, 0.28);

    --focus-outline:
        2px solid var(--color-terracotta);


    /* =====================================================
       27. MOTION
       ===================================================== */

    --motion-distance-sm: 12px;
    --motion-distance-md: 20px;
    --motion-distance-lg: 32px;

    --motion-scale-image: 1.03;


    /* =====================================================
       28. BREAKPOINT REFERENCE
       ===================================================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    /* =====================================================
       TYPOGRAPHY TEST V1 — SEMANTIC UI TOKENS
       Font sizes remain unchanged in component CSS for A/B testing.
       ===================================================== */

    --text-nav: 14px;
    --text-button: 14px;
    --text-label: 13px;
    --text-caption: 12px;


}


/* =========================================================
   DESIGN SYSTEM NOTE
   ---------------------------------------------------------
   This file is the single source of truth for the global
   visual language. Page/section CSS should consume these
   tokens instead of redefining brand values.
   ========================================================= */

/* =========================================================
   REDUCED MOTION
   Respect users who prefer reduced motion.
   ========================================================= */

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

    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
    }
}