:root {
    /* Marca — paleta cálida discreta */
    --color-primary:       #b5654e;
    --color-primary-light: #d68c72;
    --color-primary-dark:  #8a4636;

    /* Semánticos */
    --color-danger:  #d63031;
    --color-warning: #d9922b;
    --color-success: #2f9e63;
    --color-info:    #3d7bbf;

    /* Superficies */
    --color-bg:         #f7f4f1;
    --color-surface:    #ffffff;
    --color-border:     #e6ddd6;
    --color-text:       #2d2622;
    --color-text-muted: #776a62;

    /* Espaciado fluido — escala fija, nunca inventar valores */
    --spacing-xs:  clamp(0.375rem, 1vw, 0.5rem);
    --spacing-sm:  clamp(0.625rem, 1.6vw, 0.75rem);
    --spacing-md:  clamp(1rem, 2.5vw, 1.25rem);
    --spacing-lg:  clamp(1.25rem, 3.5vw, 2rem);
    --spacing-xl:  clamp(1.75rem, 4.5vw, 2.5rem);
    --spacing-2xl: clamp(2.5rem, 6vw, 3.5rem);

    /* Tipografía fluida */
    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --text-sm:   clamp(0.8rem, 0.76rem + 0.25vw, 0.9rem);
    --text-base: max(1rem, 16px);
    --text-lg:   clamp(1.1rem, 1rem + 0.6vw, 1.3rem);
    --text-xl:   clamp(1.3rem, 1.15rem + 1vw, 1.6rem);
    --text-2xl:  clamp(1.6rem, 1.3rem + 1.8vw, 2.1rem);

    /* Bordes */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(45,38,34,.08);
    --shadow-md: 0 4px 14px rgba(45,38,34,.10);
    --shadow-lg: 0 10px 28px rgba(45,38,34,.14);

    /* Layout */
    --sidebar-width:  240px;
    --header-height:  3.5rem;
    --tabbar-height:  4rem;

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Viewport real / safe area */
    --vh: 1vh;
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}