/* ─── themes.css - Variables de color y diseño ──────────────────────────── */

/* ── Inter font auto-hospedada (funciona en Safari sin bloqueos de privacidad) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tema claro */
:root,
[data-theme="light"] {
  /* Fondos */
  --color-bg:          #f0f2f8;
  --color-surface:     #ffffff;
  --color-surface-2:   #f5f7fc;
  --color-surface-3:   #ebeef8;
  --color-border:      #e2e6ef;
  --color-border-2:    #d0d6e8;

  /* Texto */
  --color-text:        #111827;
  --color-text-2:      #4b5563;
  --color-text-3:      #9ca3af;

  /* Primario (indigo) */
  --color-primary:     #6366f1;
  --color-primary-dk:  #4f46e5;
  --color-primary-lt:  #eef2ff;
  --color-primary-mid: #a5b4fc;

  /* Semánticos */
  --color-success:     #10b981;
  --color-success-lt:  #d1fae5;
  --color-warning:     #f59e0b;
  --color-warning-lt:  #fef3c7;
  --color-danger:      #ef4444;
  --color-danger-lt:   #fee2e2;
  --color-info:        #3b82f6;
  --color-info-lt:     #dbeafe;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(99,102,241,.08), 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-primary: 0 4px 16px rgba(99,102,241,.35);

  /* Sidebar */
  --sidebar-bg:        #1e1f2e;
  --sidebar-bg-2:      #16172a;
  --sidebar-text:      #8b92b8;
  --sidebar-text-2:    #c2c7e0;
  --sidebar-active:    rgba(99,102,241,.18);
  --sidebar-active-border: #6366f1;
  --sidebar-hover:     rgba(255,255,255,.05);

  /* Radios */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Topbar */
  --topbar-bg:    #ffffff;
  --topbar-border: #e2e6ef;
}

/* Tema oscuro */
[data-theme="dark"] {
  --color-bg:          #0d0f1a;
  --color-surface:     #151728;
  --color-surface-2:   #1c1f35;
  --color-surface-3:   #232640;
  --color-border:      #2a2d4a;
  --color-border-2:    #363a5c;

  --color-text:        #f0f1f8;
  --color-text-2:      #8b93b8;
  --color-text-3:      #4a5280;

  --color-primary:     #818cf8;
  --color-primary-dk:  #6366f1;
  --color-primary-lt:  #1e2148;
  --color-primary-mid: #4f56a0;

  --color-success:     #34d399;
  --color-success-lt:  #0d2e20;
  --color-warning:     #fbbf24;
  --color-warning-lt:  #2a1e06;
  --color-danger:      #f87171;
  --color-danger-lt:   #2a0f0f;
  --color-info:        #60a5fa;
  --color-info-lt:     #0d1e3a;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.35);
  --shadow:    0 4px 16px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
  --shadow-primary: 0 4px 16px rgba(99,102,241,.45);

  --sidebar-bg:        #0d0f1a;
  --sidebar-bg-2:      #080a14;
  --sidebar-text:      #5a6290;
  --sidebar-text-2:    #8b93b8;
  --sidebar-active:    rgba(129,140,248,.15);
  --sidebar-active-border: #818cf8;
  --sidebar-hover:     rgba(255,255,255,.04);

  --topbar-bg:    #151728;
  --topbar-border: #2a2d4a;
}