/* =====================================================
   CIMARRÓN MAIL — CSS VARIABLES & THEMES
   ===================================================== */

:root {
  /* Brand */
  --brand-primary: #3d6649;
  --brand-secondary: #5a8a6a;
  --brand-light: #85b094;

  /* Accent (customizable via JS) */
  --accent: #679e79;
  --accent-hover: #3d6649;
  --accent-light: rgba(90, 138, 106, 0.12);
  --accent-text: #ffffff;

  /* Layout */
  --sidebar-width: 280px;
  --sidebar-collapsed: 72px;
  --list-width: 340px;
  --topbar-height: 56px;

  /* Border radius (customizable) */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;

  /* Transitions */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.18);

  /* Glassmorphism (toggled by JS) */
  --glass-blur: 0px;
  --glass-bg: transparent;
  --glass-border: transparent;
}

/* ── LIGHT THEME ───────────────────────────────────── */
[data-theme="light"], :root {
  --bg-base: #f4f6f8;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8fafb;
  --bg-surface-3: #f0f4f0;
  --bg-hover: rgba(0,0,0,.04);
  --bg-active: rgba(90,138,106,.09);
  --bg-selected: rgba(90,138,106,.07);

  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.14);

  --text-primary: #1f2d2a;
  --text-secondary: #6b7880;
  --text-tertiary: #9ca8af;
  --text-inverse: #ffffff;

  --sidebar-bg: #eef3f0;
  --sidebar-text: #2d4a38;
  --topbar-bg: #ffffff;
  --list-bg: #ffffff;
  --view-bg: #f8fafb;

  --unread-bg: #ffffff;
  --unread-dot: var(--accent);

  --priority-alta-bg: #fdf4f4;
  --priority-alta-text: #b05555;
  --priority-media-bg: #fdfaf0;
  --priority-media-text: #a07830;
  --priority-baja-bg: #f2faf5;
  --priority-baja-text: #4a8a60;

  --scrollbar: rgba(0,0,0,.12);
  --input-bg: #f4f6f8;
}

/* ── DARK THEME ────────────────────────────────────── */
[data-theme="dark"] {
  --bg-base: #0d1117;
  --bg-surface: #161b22;
  --bg-surface-2: #1c2128;
  --bg-surface-3: #21262d;
  --bg-hover: rgba(255,255,255,.04);
  --bg-active: rgba(90,138,106,.18);
  --bg-selected: rgba(90,138,106,.12);

  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-tertiary: #6e7681;
  --text-inverse: #0d1117;

  --sidebar-bg: #0d1117;
  --sidebar-text: #c9d1d9;
  --topbar-bg: #161b22;
  --list-bg: #161b22;
  --view-bg: #0d1117;

  --unread-bg: #1c2128;
  --unread-dot: var(--brand-light);

  --priority-alta-bg: rgba(180,80,80,.12);
  --priority-alta-text: #e08888;
  --priority-media-bg: rgba(180,140,60,.12);
  --priority-media-text: #d4a84a;
  --priority-baja-bg: rgba(80,150,100,.12);
  --priority-baja-text: #7abf94;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.5);

  --scrollbar: rgba(255,255,255,.12);
  --input-bg: #21262d;
}

/* ── GLASSMORPHISM ─────────────────────────────────── */
[data-glass="true"] {
  --glass-blur: 16px;
  --glass-bg: rgba(255,255,255,.05);
  --glass-border: rgba(255,255,255,.12);
}
[data-theme="light"][data-glass="true"] {
  --glass-bg: rgba(255,255,255,.7);
  --glass-border: rgba(255,255,255,.8);
}

/* ── ACCENT COLORS ─────────────────────────────────── */
:root {
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --accent-light: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── SCROLLBAR STYLING ─────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 99px; }

/* ── NO ANIMATIONS MODE ────────────────────────────── */
[data-animations="false"] *,
[data-animations="false"] *::before,
[data-animations="false"] *::after {
  transition: none !important;
  animation: none !important;
}