/* ============================================================
   THEME — tasApp Brand System
   Basado en docs/BRAND.md. NO improvisar valores.
   ============================================================ */

:root {
  /* Legacy palette (mantener compatibilidad) */
  --slate-50: #fafafa;
  --slate-100: #f4f4f5;
  --slate-200: #e4e4e7;
  --slate-300: #d4d4d8;
  --slate-400: #a1a1aa;
  --slate-500: #71717a;
  --slate-600: #52525b;
  --slate-700: #3f3f46;
  --slate-800: #27272a;
  --slate-900: #18181b;
  --slate-950: #09090b;

  /* Category colors (BRAND.md) */
  --cat-food: #F97316;
  --cat-home: #3B82F6;
  --cat-health: #EF4444;
  --cat-wellness: #10B981;
  --cat-style: #EC4899;
  --cat-fun: #FBBF24;
  --cat-travel: #06B6D4;
  --cat-transport: #8B5CF6;
  --cat-invest: #A855F7;

  /* Spacing (BRAND.md) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border radius (BRAND.md) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows (BRAND.md) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 0 4px rgba(0,112,224,0.2);
}

/* ============================================================
   DARK — Default
   ============================================================ */
:root,
.theme-dark {
  --bg-primary: #0A0A0A;
  --bg-secondary: #131313;
  --bg-tertiary: #1C1C1C;
  --bg-card: #131313;
  --bg-hover: #1F1F1F;
  --bg-overlay: rgba(0,0,0,0.75);

  --border-color: #2A2A2A;
  --border-strong: #3A3A3A;

  --text-primary: #FFFFFF;
  --text-secondary: #A8A8AE;
  --text-tertiary: #8A8A90;

  --accent: #0070E0;
  --accent-hover: #005AC2;
  --accent-text: #FFFFFF;

  --color-income: #1FCB6F;
  --color-expense: #E64949;
  --color-warning: #F59E0B;
  --color-info: #0070E0;
  --color-transfer: #0070E0;

  --nav-bg: #0A0A0A;
  --nav-border: #2A2A2A;

  color-scheme: dark;
}

/* ============================================================
   LIGHT
   ============================================================ */
.theme-light {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #EEEEEF;
  --bg-card: #FFFFFF;
  --bg-hover: #F0F0F2;
  --bg-overlay: rgba(0,0,0,0.4);

  --border-color: #E5E5E7;
  --border-strong: #C7C7CC;

  --text-primary: #0A0A0A;
  --text-secondary: #6E6E73;
  --text-tertiary: #8E8E93;

  --accent: #0070E0;
  --accent-hover: #005AC2;
  --accent-text: #FFFFFF;

  --color-income: #1FCB6F;
  --color-expense: #E64949;
  --color-warning: #F59E0B;
  --color-info: #0070E0;
  --color-transfer: #0070E0;

  --nav-bg: #FFFFFF;
  --nav-border: #E5E5E7;

  /* Sombras suaves para fondo claro (las default son para dark y se ven pesadas) */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);

  color-scheme: light;
}

/* ============================================================
   SYSTEM — Sigue preferencia del SO
   ============================================================ */
@media (prefers-color-scheme: light) {
  .theme-system {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F7;
    --bg-tertiary: #EEEEEF;
    --bg-card: #FFFFFF;
    --bg-hover: #F0F0F2;
    --bg-overlay: rgba(0,0,0,0.4);

    --border-color: #E5E5E7;
    --border-strong: #C7C7CC;

    --text-primary: #0A0A0A;
    --text-secondary: #6E6E73;
    --text-tertiary: #8E8E93;

    --accent: #0070E0;
    --accent-hover: #005AC2;
    --accent-text: #FFFFFF;

    --color-income: #1FCB6F;
    --color-expense: #E64949;
    --color-warning: #F59E0B;
    --color-info: #0070E0;
    --color-transfer: #0070E0;

    --nav-bg: #FFFFFF;
    --nav-border: #E5E5E7;

    --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
    --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
    --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);

    color-scheme: light;
  }
}

/* ============================================================
   VIEW TRANSITIONS — efecto circular del theme toggle
   ============================================================ */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }

html.vt-closing::view-transition-old(root) { z-index: 9999; }
html.vt-closing::view-transition-new(root) { z-index: 1; }

/* Entrada de página al navegar */
.page-enter { animation: page-enter 0.32s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
}

/* Transición suave para cambios de color manuales */
body, .card, .stat-card, .form-input, .form-select, .form-textarea,
.btn, .sidebar, .bottom-nav, .modal, .nav-item {
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}