/*==============================================================
    SANSKRITIGRAM CULTURAL CENTRE
    GLOBAL DESIGN TOKENS
==============================================================*/

:root {
    /*==========================================================
        BRAND COLOURS
    ==========================================================*/

    --color-navy: #031A36;
    --color-navy-deep: #021225;
    --color-navy-light: #06264C;
    --color-gold: #D6A33D;
    --color-gold-light: #E9C96E;
    --color-gold-dark: #A87A22;
    --color-brown: #71321F;
    --color-brown-light: #8A412A;
    --color-brown-dark: #5F2417;
    --color-ivory: #FFF9EE;
    --color-ivory-light: #FFFDF8;
    --color-cream: #FBF6EA;
    --color-text: #3F2A21;
    --color-text-light: #6F5A48;
    --color-white: #FFFFFF;
    /*==========================================================
        TYPOGRAPHY
    ==========================================================*/

    --font-heading: "Cormorant Garamond", serif;
    --font-brand: "Cinzel", serif;
    --font-body: "Manrope", sans-serif;
    --font-hindi: "Noto Serif Devanagari", serif;
    /*==========================================================
        FONT SIZES
    ==========================================================*/

    --fs-hero-title: 72px;
    --fs-page-title: 56px;
    --fs-section-title: 46px;
    --fs-subtitle: 22px;
    --fs-body: 18px;
    --fs-small: 15px;
    /*==========================================================
        FONT WEIGHTS
    ==========================================================*/

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /*==========================================================
        LAYOUT
    ==========================================================*/

    --container-width: 1280px;
    --container-padding: 24px;
    --header-height: 92px;
    --hero-home-height: 540px;
    --hero-inner-height: 320px;
    /*==========================================================
        SECTION SPACING
    ==========================================================*/

    --section-padding: 90px;
    --section-gap: 70px;
    --section-space-small: 48px;
    --section-space-medium: 72px;
    --section-space-large: 96px;
    /*==========================================================
        GRID
    ==========================================================*/

    --grid-gap-small: 20px;
    --grid-gap-medium: 32px;
    --grid-gap-large: 48px;
    /*==========================================================
        BORDER RADIUS
    ==========================================================*/

    --border-radius: 8px;
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-round: 999px;
    /*==========================================================
        BUTTONS
    ==========================================================*/

    --button-height: 56px;
    /*==========================================================
        SHADOWS
    ==========================================================*/

    --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
    --shadow-card: 0 20px 45px rgba(0,0,0,.12);
    --shadow-large: 0 30px 60px rgba(0,0,0,.16);
    /*==========================================================
        Z-INDEX
    ==========================================================*/

    --z-header: 1000;
    --z-dropdown: 1100;
    --z-overlay: 900;
    --z-modal: 5000;
    /*==========================================================
        TRANSITIONS
    ==========================================================*/

    --transition-fast: .25s ease;
    --transition-medium: .35s ease;
    --transition-slow: .50s ease;
}