/**
 * Ikiratours B2B — design tokens (source of truth)
 * Colores alineados al logo: cian, lima, azul marino.
 *
 * Uso:
 * - Enlazar primero: <link rel="stylesheet" href=".../design-tokens.css">
 * - Luego: style.css, agency.css, admin.css (o @import desde esas hojas)
 * - Variables canónicas --brand-*; alias --primary / --primary-color para código legado
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

:root {
    /* Marca (logo) */
    --brand-primary: #00d9d9;
    --brand-primary-dark: #00b8b8;
    --brand-primary-mid: #1de9b6;
    --brand-secondary: #cdff00;
    --brand-dark: #0a2540;
    --brand-dark-soft: #1a3a5c;

    /* Superficies */
    --brand-light: #f8fafc;
    --brand-white: #ffffff;
    --brand-border: #e2e8f0;
    --brand-border-strong: #cbd5e1;

    /* Texto */
    --brand-text: #0a2540;
    --brand-text-muted: #64748b;
    --brand-text-light: #94a3b8;

    /* Semánticos (tablas, alertas) */
    --brand-success: #10b981;
    --brand-warning: #f59e0b;
    --brand-danger: #ef4444;
    --brand-info: #0ea5e9;

    /* Alias semánticos (páginas legacy) */
    --success: var(--brand-success);
    --warning: var(--brand-warning);

    /* Tipografía */
    --font-ui: 'Outfit', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;

    /* Gradientes discretos (marca) */
    --gradient-brand: linear-gradient(135deg, #00d9d9 0%, #1de9b6 100%);
    --gradient-brand-dark: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);

    /* Sombras (minimal) */
    --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.04);
    --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.06);
    --shadow-md: 0 4px 20px rgba(10, 37, 64, 0.08);
    --shadow-lg: 0 12px 40px rgba(10, 37, 64, 0.1);
    --shadow-xl: 0 20px 50px rgba(10, 37, 64, 0.12);
    --shadow-glow: 0 0 24px rgba(0, 217, 217, 0.25);

    /* Espaciado */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;

    /* Radios */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;

    /* Transiciones */
    --ease-fast: 0.15s ease;
    --ease-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-max: 1280px;
    --header-height: 96px; /* barra pública con logo grande; el hero usa --site-public-header-offset en site-public.css */
    /* Banners listado: destinos, tarifario, servicios (misma altura mínima y padding) */
    --public-inner-hero-min-height: clamp(320px, 40vh, 480px);
    --public-inner-hero-padding: clamp(3rem, 10vh, 5.25rem) 2rem clamp(3rem, 9vh, 4.25rem);
    --z-header: 1000;
    --z-dropdown: 1010;
    --z-modal: 2000;

    /* --- Alias portal agencia / vistas PHP --- */
    --primary: var(--brand-primary);
    --primary-dark: var(--brand-primary-dark);
    --secondary: var(--brand-secondary);
    --dark: var(--brand-dark);
    --light: var(--brand-light);
    --white: var(--brand-white);
    --gray: var(--brand-text-muted);
    --gradient-primary: var(--gradient-brand);
    --gradient-dark: var(--gradient-brand-dark);

    /* --- Alias hoja legacy style.css --- */
    --primary-color: var(--brand-primary);
    --primary-light: #33e0e0;
    --secondary-color: var(--brand-secondary);
    --secondary-dark: #b8e600;
    --accent-gold: var(--brand-warning);
    --accent-teal: var(--brand-primary-mid);
    --accent-purple: var(--brand-dark-soft);
    --dark-bg: var(--brand-dark);
    --dark-card: #1e293b;
    --dark-hover: var(--brand-dark-soft);
    --text-primary: var(--brand-text);
    --text-secondary: var(--brand-text-muted);
    --text-light: var(--brand-text-light);
    --text-white: #ffffff;
    --gradient-warm: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark-soft) 100%);
    --gradient-cool: var(--gradient-brand);
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --spacing-2xl: var(--space-2xl);
    --transition-fast: var(--ease-fast);
    --transition-base: var(--ease-base);
    --transition-slow: var(--ease-slow);
    --font-primary: var(--font-body);
    --font-heading: var(--font-ui);
}