/* ==========================================================================
   URBENORTE — Design Tokens
   ========================================================================== */

:root {
    /* ── Colors — Urbenorte Brand ── */
    --c-primary:       #1B6060;   /* teal corporativo — texto, nav, bordes activos */
    --c-primary-light: #2B8080;   /* teal hover */
    --c-primary-dark:  #124848;   /* teal dark / footer headings */
    --c-accent:        #E8521A;   /* naranja corporativo — CTAs, badges, highlights */
    --c-accent-light:  #F0713A;   /* naranja hover */
    --c-accent-dark:   #C43D10;   /* naranja presionado */

    --c-bg: #F5F0E8;
    --c-bg-white: #FFFFFF;
    --c-bg-dark: #2C2C2C;

    --c-text: #2C2C2C;
    --c-text-light: #6B6B6B;
    --c-text-muted: #9B9B9B;

    --c-border: #E5E0D6;
    --c-border-dark: #D0C9BC;

    --c-error: #C44B4B;
    --c-success: #4A8B5C;
    --c-warning: #D4A847;
    --c-info: #4A7B8B;

    --c-gold: #C4A265;           /* dorado decorativo — hero eyebrow, secciones premium */
    --c-olive: #4A5A3C;          /* verde oliva — sección valoración, acentos naturales */
    --c-olive-dark: #2A3520;     /* oliva oscuro — fondos sección valoración */

    /* ── Typography ── */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ── Font sizes ── */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md: 1.125rem;    /* 18px */
    --fs-lg: 1.25rem;     /* 20px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-2xl: 2rem;       /* 32px */
    --fs-3xl: 2.5rem;     /* 40px */
    --fs-4xl: 3.5rem;     /* 56px */

    /* ── Spacing ── */
    --sp-1: 0.25rem;      /* 4px */
    --sp-2: 0.5rem;       /* 8px */
    --sp-3: 0.75rem;      /* 12px */
    --sp-4: 1rem;         /* 16px */
    --sp-5: 1.25rem;      /* 20px */
    --sp-6: 1.5rem;       /* 24px */
    --sp-8: 2rem;         /* 32px */
    --sp-10: 2.5rem;      /* 40px */
    --sp-12: 3rem;        /* 48px */
    --sp-16: 4rem;        /* 64px */
    --sp-20: 5rem;        /* 80px */
    --sp-24: 6rem;        /* 96px */

    /* ── Layout ── */
    --container: 1280px;
    --container-narrow: 960px;
    --container-wide: 1440px;
    --header-h: 80px;
    --sidebar-w: 320px;

    /* ── Borders ── */
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

    /* ── Transitions ── */
    --transition: 200ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
}

@media (max-width: 640px) {
    :root {
        --header-h: 64px;
    }
}