/* ══════════════════════════════════════════════════
   Design Tokens — Single source of CSS custom properties
   ══════════════════════════════════════════════════

   BREAKPOINT STANDARDS (use these exact values in @media):
   ───────────────────────────────────────────────────
   768px  — mobile/tablet boundary (primary breakpoint)
   640px  — small phone adjustments
   480px  — tiny phone adjustments
   1024px — tablet/desktop boundary
   ───────────────────────────────────────────────────
   Never use 767px or 769px. Always 768px.
   ─────────────────────────────────────────────────── */

/* Light mode defaults — always available */
:root {
    --bg-primary: var(--bg-light, #F8F9FA);
    --bg-secondary: #F3F4F6;
    --bg-tertiary: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border-color: #D1D5DB;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --calendar-icon-filter: none;
    --primary: #DC2626;
    --primary-hover: #B91C1C;
    --secondary: #1F2937;

    /* Semantic colors - Light mode */
    --danger-color: #DC2626;
    --danger-bg: rgba(220, 38, 38, 0.1);
    --success-color: #16A34A;
    --success-bg: rgba(22, 163, 74, 0.1);
    --warning-color: #D97706;
    --warning-bg: rgba(217, 119, 6, 0.1);
    --info-color: #2563EB;
    --info-bg: rgba(37, 99, 235, 0.1);
    --purple-color: #9333EA;
    --purple-bg: rgba(147, 51, 234, 0.1);
    --yellow-color: #CA8A04;
    --yellow-bg: rgba(202, 138, 4, 0.1);
    --orange-color: #EA580C;
    --orange-bg: rgba(234, 88, 12, 0.1);
    --indigo-color: #6366F1;
    --indigo-bg: rgba(99, 102, 241, 0.1);
    --pink-color: #DB2777;
    --pink-bg: rgba(219, 39, 119, 0.1);

    /* ── Surface tokens ── */
    --bg-elevated: #FFFFFF;       /* card sobre app, modales, popovers */
    --radius: 0.5rem;             /* radio default */

    /* ── Aliases legales — apuntan a tokens canónicos.
       Existen para mantener compatibilidad con código que usa nombres legacy.
       NO usar para código nuevo: prefer el token canónico directo. ── */
    --color-accent: var(--info-color);
    --surface-featured: var(--info-bg);
    --border-subtle: var(--border-color);
    --border-primary: var(--border-color);
    --text-muted: var(--text-secondary);
    --success: var(--success-color);
    --danger: var(--danger-color);
    --font-mono: monospace;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
    --fw-medium: 500;
    --fw-semibold: 600;
    --primary-light: var(--info-bg);
    --radius-md: var(--radius);
    --shadow-md: var(--shadow);
    --surface-color: var(--bg-secondary);

    /* ── Component-scoped slots ──
       Variables que se inyectan inline desde Blade (DB-driven, ej:
       $category->color). Default neutro para cuando no hay valor inline. */
    --cat-color: var(--text-secondary);
    --progress: 0%;

    /* ── Title scale (single source) ── */
    --fs-title-page: 1.5rem;     /* page hero */
    --fs-title-section: 1rem;    /* card + section title */
    --fs-title-sub: 0.85rem;     /* sub-section / labels de grupo */
    --fw-title-page: 700;
    --fw-title: 600;

    /* Alert tokens */
    --error-bg: #FEF2F2;
    --error-border: #FECACA;
    --error-text: #991B1B;
    --success-bg: #F0FDF4;
    --success-border: #BBF7D0;
    --success-text: #166534;

    /* Form tokens */
    --input-placeholder: #9CA3AF;
    --label-color: #374151;

    /* Group colors for roles */
    --group-admin: #EF4444;
    --group-caja: #F59E0B;
    --group-clientes: #3B82F6;
    --group-dashboard: #8B5CF6;
    --group-finanzas: #10B981;
    --group-precios: #EC4899;
    --group-reportes: #06B6D4;
    --group-tickets: #F97316;
}

/* Dark mode overrides */
.dark {
    --bg-primary: var(--bg-dark, #111827);
    --bg-secondary: #1F2937;
    --bg-tertiary: #374151;
    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --border-color: #374151;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --calendar-icon-filter: invert(1);

    /* Semantic colors - Dark mode */
    --danger-color: #EF4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --success-color: #22C55E;
    --success-bg: rgba(34, 197, 94, 0.15);
    --warning-color: #F59E0B;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --info-color: #3B82F6;
    --info-bg: rgba(59, 130, 246, 0.15);
    --purple-color: #A855F7;
    --purple-bg: rgba(168, 85, 247, 0.15);
    --yellow-color: #FACC15;
    --yellow-bg: rgba(250, 204, 21, 0.15);
    --orange-color: #F97316;
    --orange-bg: rgba(249, 115, 22, 0.15);
    --indigo-color: #818CF8;
    --indigo-bg: rgba(129, 140, 248, 0.15);
    --pink-color: #F472B6;
    --pink-bg: rgba(244, 114, 182, 0.15);

    /* Surface tokens — dark */
    --bg-elevated: #1F2937;
    /* aliases (--color-accent, --surface-featured, --border-subtle,
       --border-primary, --text-muted) heredan automáticamente vía
       var() chain ya que apuntan a tokens que sí cambian en .dark */
}