/*PART 02 — CSS (Section 1)*/
    /*=========================================================
=========================================================*


/*=========================================================
MARAMATTA SAFARIS
GLOBAL DESIGN SYSTEM
variables.css
=========================================================*/

:root{

/* Primary Brand */

--ms-green: #274921;
--ms-green-dark: #1D3618);
--ms-green-light: #3B6333;

--ms-orange: #B15727;
--ms-orange-dark: #8F431A;
--ms-orange-light: #C9774A;


/* Neutral Backgrounds */

--ms-bg: #FBFAF7;
--ms-white: #FFFFFF;

--ms-surface: #FFFFFF;
--ms-surface-alt: #F6F4EF;
--ms-surface-soft: #F2EFE8;


/* Typography */

--ms-heading: #20391B;
--ms-text: #545454;
--ms-text-light: #767676;
--ms-text-muted: #9A9A9A;


/*=====================================================
    BORDERS
    =====================================================*/

--ms-border: #E7E2D8;
--ms-border-dark: #D4CCBD;

--border-light:1px solid var(--ms-border);

--border-accent: 1px solid rgba(217,149,50,.35);


/* Accent Colors */

--ms-accent-green: #5F8A57;
--ms-accent-orange: #D58A5C;


/* Overlay */

--ms-overlay: rgba(0,0,0,.38);
--ms-overlay-dark: rgba(0,0,0,.58);


/* Status */

--ms-success: #3F7A3A;
--ms-warning: #D99229;
--ms-danger: #B33A3A;


/* Shadows */

--ms-shadow-sm: rgba(0,0,0,.05);
--ms-shadow: rgba(0,0,0,.08);
--ms-shadow-lg: rgba(0,0,0,.14);



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

    --font-heading: "Playfair Display", serif;
    --font-body: "Montserrat", sans-serif;



    /*=====================================================
    FONT SIZES
    =====================================================*/

    --fs-hero: 56px;

    --fs-section-title: 42px;
    --fs-section-subtitle: 14px;


    /*--fs-price:22px;/*--fs-price: 30px;*/
  
    --fs-card-title:1.625rem;   /* 26px */
    --fs-price:1.500rem;        /* 24px */

    --fs-body:1rem;             /* 16px */
    --fs-small:0.875rem;        /* 14px */
    --fs-meta:0.8125rem;        /* 13px */

    --fs-button:0.9375rem;      /* 15px */
    



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

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;



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

    --lh-heading:1.25; /*--lh-heading: 1.2;*/
    --lh-body: 1.7;
    --lh-small: 1.6;
    
    

    
    



    /*=====================================================
    LETTER SPACING
    =====================================================*/
    --ls-meta: .04em;
    /*--ls-meta: .08em;*/
    --ls-subtitle: .12em;


    /*=====================================================
    CONTENT WIDTHS
    =====================================================*/

    /*--container-width: 1320px;

    --content-width: 860px;*/
    --container-width: 1500px;
    
    /*--container-width: 100%;*/

    /*--content-width: 1320px;*/
    --content-width: 100%;

    --featured-width: 760px;
    
        /*=====================================================
    CARD DIMENSIONS
    =====================================================*/

    --card-min-height: 520px;/*--card-min-height: 680px;*/

    --card-width: 340px;
    
         /*=====================================================
     CARD FOOTER
     =====================================================*/

      --card-footer-height: 60px;/*--card-footer-height: 88px;*/

    --text-width: 720px;



    /*=====================================================
    SPACING SCALE
    =====================================================*/

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 72px;

  /*I would introduce one additional spacing variable to separate section spacing from internal section padding:*/
    
    /* Page rhythm */
--space-section: 96px;

/* Internal section padding */
--section-padding: 96px;

/* Header ↔ Body spacing */
--section-gap: 48px;



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

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;

    --radius-pill: 999px;

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

/* Soft resting */

--shadow-small:
    0 2px 8px rgba(0,0,0,.04),
    0 8px 20px rgba(0,0,0,.04);


/* Standard card */

--shadow-medium:
    0 4px 12px rgba(0,0,0,.05),
    0 18px 40px rgba(0,0,0,.08),
    0 35px 70px rgba(0,0,0,.06);


/* Floating */

--shadow-large:
    0 8px 20px rgba(0,0,0,.06),
    0 28px 60px rgba(0,0,0,.10),
    0 50px 90px rgba(0,0,0,.08);


/* Luxury hover */

--shadow-xl:
    0 12px 30px rgba(0,0,0,.08),
    0 40px 90px rgba(0,0,0,.12),
    0 70px 130px rgba(0,0,0,.10);


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

    --transition-fast: .25s;
    --transition-normal: .35s;
    --transition-luxury: .5s;
    --transition-slow: .8s;
    --transition-cinematic: 1.2s;



    /*=====================================================
    EASING
    =====================================================*/

    --ease-luxury:
        cubic-bezier(.22,.61,.36,1);

    --ease-smooth:
        ease-in-out;



    /*=====================================================
    IMAGE EFFECTS
    =====================================================*/

    /*--image-scale: 1.08;*/
    --image-scale:1.04;

    --overlay-opacity: .45;

    /*--card-hero-height:clamp(220px,42vw,340px);/*--card-media-ratio: 16 / 10;*/
    /*=====================================================
    Card Allocation (Mobile Default)
    =====================================================*/

    --card-grid-columns:1;

    --card-grid-gap:var(--space-lg);

    --card-hero-height:260px;

    --card-content-padding:var(--space-lg);
    
    --card-max-width:none;
    
    --card-actions-padding:20px 24px;
    





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

    --header-height: 90px;



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

    --z-base: 1;
    --z-overlay: 10;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal: 1000;
    --z-loader: 1100;
    --z-tooltip: 1200;
    /*=========================================================
    card content's ration
    ==========================================================*/
    --card-media-ratio:60%;
    --card-body-ratio: 30%
    --card-decision-ratio:10%
    
    
    
     --overlay-start: rgba(0,0,0,.88);
    --overlay-middle: rgba(0,0,0,.55);
    --overlay-soft: rgba(0,0,0,.20);
    --overlay-clear: rgba(0,0,0,0);
    
    
    
    
    /*=========================================================
PHASE 8
PART 5 — RESPONSIVE ALLOCATION
(Default Allocation)
=========================================================*/

    /* Media */

    --card-media-min: 320px;

    /* Stage */

    --card-stage-padding: var(--space-lg);

    --card-stage-gap: var(--space-md);

    /* Footer */

    --card-footer-direction: row;

    --card-footer-gap: var(--space-md);
    


}