/* ============================================================
   TOKENS — Variables de diseño (única fuente)
   Cargar ANTES de site.css / admin.css en cada página.
   ============================================================ */
:root {
    /* Marca */
    --primary-blue: #1a3a5c;
    --secondary-blue: #2d5a87;
    --accent-yellow: #f5a623;
    --accent-gold: #d4920a;
    --dark-bg: #0d1f2d;
    --light-bg: #f0f4f8;
    --white: #fff;
    --paper: #faf8f5;
    --text-light: #e8eef3;
    --text-dark: #1a1a1a;

    /* Estados (sitio público) */
    --success-green: #25D366;
    --warning-orange: #f39c12;
    --danger-red: #e74c3c;

    /* Estados (panel) */
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;
    --info: #3498db;

    /* Grises (panel) */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;

    /* Layout del panel */
    --sidebar-width: 260px;
    --header-height: 70px;

    /* Movimiento y profundidad (sitio público) */
    --ease: cubic-bezier(.4,0,.2,1);
    --transition: .35s var(--ease);
    --shadow-sm: 0 4px 14px rgba(13,31,45,.08);
    --shadow-md: 0 12px 35px rgba(13,31,45,.14);
    --shadow-lg: 0 25px 60px rgba(13,31,45,.22);
    --overlay-dark: linear-gradient(180deg, rgba(8,18,28,.55) 0%, rgba(10,22,34,.82) 55%, rgba(13,31,45,.96) 100%);
}