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: 24rem;
    --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.5em;
    --guide-card-image-height: 36em;
    --guide-card-description-height: 10em;
    --guide-card-total-height: 46em;

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

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

    /* ============================================
       FLUID DESIGN TOKENS
       These scale smoothly with the viewport instead
       of jumping at breakpoints. Use them in NEW code
       or when refactoring. Existing fixed rem values
       (cards, buttons, etc.) can stay as-is.
       ============================================ */

    /* Spacing — for padding, margins, gaps between sections */
    --space-xs:  clamp(0.5rem, 1vw, 0.75rem);
    --space-sm:  clamp(0.75rem, 1.5vw, 1.25rem);
    --space-md:  clamp(1.25rem, 2vw, 2rem);
    --space-lg:  clamp(2rem, 3.5vw, 3.5rem);
    --space-xl:  clamp(3rem, 5vw, 6rem);
    --space-2xl: clamp(4rem, 7vw, 9rem);

    /* Page-level layout (replaces the hardcoded 167rem + 3rem 3rem) */
    --page-max-width: 167rem;
    --page-padding-y: clamp(2rem, 2.5vw, 3rem);
    --page-padding-x: clamp(0rem, 2.5vw, 1rem);

    /* Fluid font sizes — for NEW heading classes / hero text.
       Your existing tralenso-header__* classes stay as-is. */
    --fs-display: clamp(2.4rem, 3.5vw, 4rem);
    --fs-h1:      clamp(2rem, 2.5vw, 2.8rem);
    --fs-h2:      clamp(1.7rem, 2vw, 2.2rem);
    --fs-h3:      clamp(1.5rem, 1.7vw, 1.8rem);
    --fs-body:    clamp(1.3rem, 1.4vw, 1.5rem);

    /* Viewport heights — always use dvh over vh going forward */
    --vh-full:     100dvh;
    --modal-max-h: min(90dvh, 90rem);
}

/* ============================================
   HEIGHT-CONSTRAINED VIEWPORTS
   MacBook 13" gives ~760px of usable browser height.
   This block tightens the spacing/font tokens centrally,
   so any element using them gets breathing room
   automatically on short screens — no per-component edits.
   ============================================ */
@media (max-height: 800px) and (min-width: 1024px) {
    :root {
        --space-lg: clamp(1.5rem, 3vw, 2.5rem);
        --space-xl: clamp(2rem, 4vw, 4rem);
        --space-2xl: clamp(2.5rem, 5vw, 6rem);
        --page-padding-y: clamp(1rem, 2vw, 3rem);
        --fs-display: clamp(2rem, 3vw, 3rem);
        --fs-h1: clamp(1.8rem, 2.2vw, 2.4rem);
        --nav-height: 6rem;
    }
}