/* ============================================
   CARIOCANDO — Design Tokens (CSS Variables)
   Portal Premium de Turismo do Rio de Janeiro
   ============================================ */

:root {
    /* ── Primary: Azul Rio ── */
    --azul-rio: #00AFEF;
    --azul-rio-light: #33BFFF;
    --azul-rio-dark: #008FCC;
    --azul-rio-10: rgba(0, 175, 239, 0.10);
    --azul-rio-20: rgba(0, 175, 239, 0.20);
    --azul-rio-50: rgba(0, 175, 239, 0.50);

    /* ── Deep Blue ── */
    --azul-profundo: #0A1628;
    --azul-noite: #0F2140;
    --azul-escuro: #132D5E;
    --azul-medio: #1B6B93;
    --azul-suave: #2E86AB;

    /* ── Sky & Light Blues ── */
    --azul-ceu: #E8F4FD;
    --azul-ceu-dark: #D0E8F7;
    --azul-cristalino: #F0F8FF;

    /* ── Neutrals ── */
    --branco: #FFFFFF;
    --off-white: #F7F9FC;
    --cinza-bg: #F1F5F9;
    --cinza-claro: #E2E8F0;
    --cinza-medio: #CBD5E1;
    --cinza-texto-light: #94A3B8;
    --cinza-texto: #64748B;
    --cinza-escuro: #334155;
    --cinza-mais-escuro: #1E293B;
    --preto: #0F172A;

    /* ── Warm Accents ── */
    --dourado: #D4A853;
    --dourado-light: #E8C97A;
    --dourado-dark: #B8923D;
    --coral: #FF6B6B;
    --coral-light: #FF8A8A;
    --coral-dark: #E55555;
    --sol: #F59E0B;
    --sol-light: #FBC02D;
    --verde-natureza: #10B981;
    --verde-escuro: #059669;

    /* ── Gradients ── */
    --gradient-hero: linear-gradient(180deg, rgba(10, 22, 40, 0.1) 0%, rgba(10, 22, 40, 0.65) 60%, rgba(10, 22, 40, 0.90) 100%);
    --gradient-hero-top: linear-gradient(180deg, rgba(10, 22, 40, 0.50) 0%, transparent 100%);
    --gradient-card: linear-gradient(180deg, transparent 30%, rgba(10, 22, 40, 0.85) 100%);
    --gradient-azul: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-escuro) 50%, var(--azul-medio) 100%);
    --gradient-azul-rio: linear-gradient(135deg, var(--azul-rio) 0%, var(--azul-suave) 100%);
    --gradient-dourado: linear-gradient(135deg, var(--dourado-dark) 0%, var(--dourado) 50%, var(--dourado-light) 100%);
    --gradient-sunset: linear-gradient(135deg, #FF6B6B 0%, #F59E0B 50%, #FFD93D 100%);
    --gradient-ceu: linear-gradient(180deg, var(--azul-ceu) 0%, var(--branco) 100%);

    /* ── Typography ── */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-md: 1.125rem;    /* 18px */
    --text-lg: 1.25rem;     /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 1.875rem;   /* 30px */
    --text-3xl: 2.25rem;    /* 36px */
    --text-4xl: 3rem;       /* 48px */
    --text-5xl: 3.75rem;    /* 60px */
    --text-6xl: 4.5rem;     /* 72px */

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

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

    /* ── Layout ── */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --gutter: 1.5rem;     /* 24px */
    --gutter-lg: 2rem;    /* 32px */

    /* ── Border Radius ── */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0px 1px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-blue: 0 4px 14px rgba(0, 175, 239, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-Index ── */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-nav: 500;
}

/* ── Dark sections override ── */
[data-theme="dark"] {
    --bg-primary: var(--azul-profundo);
    --bg-secondary: var(--azul-noite);
    --text-primary: var(--branco);
    --text-secondary: var(--cinza-medio);
}