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;

    /* Aliases for names already in use across the stylesheets but never defined —
       .map-empty-state__description, .not-authorized-card__description and the
       analytics selector were all silently falling back to inherited values. */
    --color-text-muted: var(--color-gray-text);
    --color-text-secondary: var(--color-dark-gray-text);
    --color-bg-secondary: #f3f4f6;
    --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    --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%);

    /* 6.4rem, down from 7.2rem. 72px was noticeably taller than current marketplace
       headers, and every consumer (body padding-top, .default-page__content,
       .mobile-menu-content top/max-height) reads this var, so the whole layout follows. */
    --nav-height: 6.4rem;

    /* 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);

/* Breathing room under the last element in a page's CONTENT column. Applied to
       .default-home / .default-page__content / .default-page__content_banner — never to
       .default-page, which also wraps .default-page__sidebar: padding there eats into
       .profile-sidebar's height:100% + overflow-y:auto scroll region and puts "Log out"
       out of reach.
       No vw units. vw includes the vertical scrollbar's width, so a vw-based value grows
       the page, summons a scrollbar, then overflows horizontally by ~15px on Windows —
       the same trap already noted on .mobile-menu-content. */
    --page-bottom-gap: 8rem;

    /* 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;
    }
}