/* ═══════════════════════════════════════════════════════════════
   VARIABLES CSS - Storetech Design System
   Paleta minimalista con rojo como acento refinado
═══════════════════════════════════════════════════════════════ */

:root {
    /* ── COLORES PRINCIPALES ──────────────────────────────────── */
    /* Rojo acento (mantener identidad de marca) */
    --color-primary: #c0282d;
    --color-primary-hover: #a82327;
    --color-primary-light: #fef2f2;
    --color-primary-lighter: #fbe9e9;

    /* Azul secundario (para CTAs alternativas) */
    --color-secondary: #0098e1;
    --color-secondary-hover: #0080c0;

    /* Verde para stock/éxito */
    --color-success: #1a9e4e;
    --color-success-light: #eafaf1;

    /* Advertencia/consultar */
    --color-warning: #d97706;
    --color-warning-light: #fff7ed;

    /* ── FONDOS ───────────────────────────────────────────────── */
    --bg-page: #f9fafb;           /* Fondo principal - más limpio */
    --bg-card: #ffffff;
    --bg-muted: #f3f4f6;
    --bg-input: #fafbfc;

    /* ── TEXTOS ───────────────────────────────────────────────── */
    --text-primary: #111827;      /* Títulos y texto principal */
    --text-secondary: #374151;    /* Texto secundario */
    --text-muted: #6b7280;        /* Texto apagado */
    --text-light: #9ca3af;        /* Texto muy suave */

    /* ── BORDES ───────────────────────────────────────────────── */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-focus: var(--color-primary);

    /* ── SOMBRAS (minimalistas) ───────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 3px rgba(192, 40, 45, 0.12);

    /* ── BORDES REDONDEADOS ───────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ── TIPOGRAFÍA ───────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Tamaños de fuente */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;

    /* Pesos */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ── ESPACIADO ────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ── TRANSICIONES ─────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

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

/* ── DARK MODE (preparado para futuro) ───────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Por ahora no activar, pero dejar estructura lista */
        /* --bg-page: #111827;
        --bg-card: #1f2937;
        --text-primary: #f9fafb;
        --text-secondary: #e5e7eb;
        --border-light: #374151; */
    }
}