/**
 * PuntoLocal · Design System Tokens
 *
 * Base reutilizable extraída de los mockups de referencia.
 * Importar en cada vista/página que use el sistema visual nuevo.
 *
 * Casi todo el archivo son custom properties; al final hay una única regla
 * global (scrollbar de marca) que aplica a toda la app porque tokens.css se
 * importa en cada vista. Las clases utility viven en base.css; los componentes
 * en components.css.
 */

:root {
    /* ─── Paleta · "Cálido & Cercano" (naranja + durazno + crema) ──────── */
    --color-primary: #E8602C;          /* naranja cálido: header, botones, links */
    --color-primary-hover: #D2521F;
    --color-primary-active: #B8441A;
    --brand: var(--color-primary);     /* alias de marca: usado por gráficos/barras del panel */
    --color-primary-soft: #FFF1E8;     /* durazno claro: fondo hover de items */
    --color-primary-soft-2: #FFD9C2;   /* durazno medio: gradientes de thumbs/placeholders */

    --color-accent: #F5B73D;           /* amarillo cálido: detalles, 💛 */

    /* ─── Verde de marca · "Confianza & Compromiso" ─────────────────────── */
    --color-trust: #1F8A5B;            /* verde marca: Guardar, Ingresar, Publicar, Confirmar */
    --color-trust-hover: #18764C;
    --color-trust-active: #136041;
    --color-trust-soft: #E4F4EC;       /* fondo suave verde (chips/badges ok) */
    --color-trust-strong: #15803d;     /* texto verde accesible sobre fondos claros */

    /* Verde brillante de WhatsApp (solo el botón/ícono de WhatsApp) */
    --color-whatsapp: #22c55e;
    --color-whatsapp-hover: #16a34a;

    --color-success: var(--color-trust);        /* éxito = verde de marca */
    --color-success-hover: var(--color-trust-hover);
    --color-success-soft: #dcfce7;
    --color-success-strong: #15803d;   /* texto verde accesible sobre fondos claros */

    --color-danger: #ef4444;
    --color-danger-soft: #fee2e2;

    --color-warning: #f59e0b;
    --color-warning-soft: #fef3c7;
    --color-warning-strong: #92400e;   /* texto ámbar accesible (badge 'quedan pocos') */

    /* ─── Superficies y texto ──────────────────────────────────────────── */
    --bg-page: #FFF7F1;                /* crema cálido del fondo de página */
    --bg-surface: #ffffff;             /* cards, modals */
    --bg-surface-muted: #FFF3EB;       /* secciones internas, skeletons */
    --bg-subtle: #f3f4f6;              /* gris neutro sutil: fondos secundarios */
    --bg-overlay: rgba(42, 33, 28, 0.5);

    --text-strong: #2A211C;            /* slate cálido oscuro: títulos */
    --text-default: #4A3F38;           /* body */
    --text-muted: #8A7B70;             /* subtítulos, captions */
    --text-faint: #9B8B7E;             /* hints, placeholders (AA sobre fondos claros) */
    --text-on-primary: #ffffff;

    --border-soft: #F0E4DA;            /* borde sutil cards */
    --border-default: #E4D5C8;         /* borde inputs */
    --border-focus: var(--color-primary);

    /* ─── Tokens del rediseño (panel admin) — paleta cálida del .dc ───────── */
    --line: #EFE3D8;                   /* línea suave (bordes de card/tabla) */
    --line-2: #E7D9CC;                 /* línea media (inputs, divisores) */
    --surface-2: #FBF1EA;              /* superficie cálida (hover, segmented) */
    --soft: #FFF1E8;                   /* durazno muy claro (thumbs/placeholders) */
    --faint: #A8998C;                  /* texto tenue (subtítulos en mayúsculas) */
    --rail: #241B16;                   /* riel de navegación (marrón oscuro cálido) */
    --rail-2: #33271F;                 /* hover del riel */
    --blue: #3B6FB0;                   /* azul informativo (badges/links) */
    --blue-soft: #E8F0FA;
    --amber: #C9821B;                  /* ámbar de marca (badges 'quedan pocos') */
    --amber-soft: #FBEFD6;

    /* ─── Tipografía ───────────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter',
                 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;

    --fs-xs: 0.75rem;                  /* 12px — captions */
    --fs-sm: 0.875rem;                 /* 14px — small body */
    --fs-base: 1rem;                   /* 16px — body */
    --fs-lg: 1.125rem;                 /* 18px — lead */
    --fs-xl: 1.25rem;                  /* 20px — h3 */
    --fs-2xl: 1.5rem;                  /* 24px — h2 */
    --fs-3xl: 1.875rem;                /* 30px — h1 */
    --fs-display: 2.5rem;              /* 40px — números stat cards */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-normal: 1.6;

    --tracking-tight: -0.02em;         /* títulos */
    --tracking-normal: 0;
    --tracking-wide: 0.05em;            /* labels en mayúsculas */

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

    /* ─── Bordes redondeados ───────────────────────────────────────────── */
    --radius-sm: 8px;      /* badges, chips */
    --radius-md: 12px;     /* inputs, botones */
    --radius-lg: 16px;     /* cards de contenido */
    --radius-xl: 24px;     /* card principal del login, hero cards */
    --radius-full: 9999px; /* pills, avatares, FAB */

    /* ─── Sombras ──────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.18);
    --shadow-focus: 0 0 0 4px rgba(232, 96, 44, 0.14);

    /* ─── Layout ───────────────────────────────────────────────────────── */
    --container-sm: 24rem;     /* 384 — login card */
    --container-md: 48rem;     /* 768 — dashboards mobile-ish */
    --container-lg: 72rem;     /* 1152 — desktop */

    /* ─── Animación ────────────────────────────────────────────────────── */
    --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
    --easing-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast: 150ms;
    --duration-base: 220ms;
    --duration-slow: 320ms;
}

/* ─── Dark mode (placeholder — el mockup es light, se ajusta a futuro) ── */
/* @media (prefers-color-scheme: dark) { :root { ... } } */

/* ─── Scrollbar de marca (toda la app) ─────────────────────────────────
   tokens.css se importa en todas las vistas, así que esto unifica el scroll
   en naranjo en lugar del gris por defecto del navegador. */
* {
    scrollbar-width: thin;                                  /* Firefox */
    scrollbar-color: var(--color-primary) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }         /* Chrome/Edge/Safari */
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--radius-full, 999px);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-hover);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }