html {
    font-size: 62.5%; /* 1rem = 10px */
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    font-family: var(--font-family);
}

body {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background: var(--color-background-light);
}

:root {
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Brand Colors */
    --color-primary: #FF9500;
    --color-primary-dark: #C37200;
    --color-primary-light: #FFD599;
    --color-primary-extra-light:#FFEACC;

    --color-secondary: #764ba2;

    --color-dark-text: #1F2933;

    --color-dark-gray-text: #656565;
    --color-gray-text: #7C7C7C;
    --color-light-gray: #e9e9e9;

    --color-light-red: #ff2b2b;
    --color-dark-red: #a30000;

    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* Background Colors*/
    --color-background-light: #FAFAFA;

    /*Sizes of components*/
    --sidebar-w: 27rem;
    --sidebar-w-collapsed: 6rem;

    /*border color*/
    --border-gray: #dddddd;

    /* Gradients */
    --gradient-primary: linear-gradient(179deg, #FF9500 0%, #C37200 100%);
    --gradient-primary-reverse: linear-gradient(175deg, #C37200 0%,  #FF9500 100%);
    --gradient-primary-scroll: linear-gradient(90deg, #FF9500 0%, #C37200 100%);

    --gradient-gray: linear-gradient(180deg, #e9e9e9 0%, #b5b5b5 100%);
    --gradient-gray-reverse: linear-gradient(180deg, #c7c7c7 0%, #e9e9e9 100%);

    --gradient-gray-light: linear-gradient(180deg, #adadad 0%, #7C7C7C 100%);
    --gradient-gray-dark: linear-gradient(180deg, #7C7C7C 0%, #656565 100%);

    --gradient-primary-180: linear-gradient(180deg, #FF9500 0%, #C37200 100%);

    --gradient-gray-review-card: linear-gradient(148deg, #f9f9f9 0%, #e5e5e5 100%);

    --gradient-red: linear-gradient(180deg, #ff2b2b 0%, #a30000 100%);

    --gradient-star: linear-gradient(180deg, #fbbf24 0%, #ef9e16 100%);

    --gradient-blue: linear-gradient(180deg, #0098C4 0%, #006c8b 100%);

    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-purple-indigo: linear-gradient(170deg, #667eea 0%, #752cbf 100%);
    --gradient-amber-orange: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --gradient-creator: linear-gradient(135deg, #f97316 0%, #dc2626 100%);

    --nav-height: 7.2rem;

/* Guide Card Dimensions - 8:9 aspect ratio */
--guide-card-width: 30.5rem;
--guide-card-image-height: 36rem;
--guide-card-description-height: 10rem;
--guide-card-total-height: 46rem;

--marker-image-width: 9rem;
--marker-image-height: 12rem; 

--activity-card-image-width: 16rem;
--activity-card-image-height: 22rem; 
}