/* Tennessee Titans Theme — Dark Mode */
/* Colors: Titans Blue #4B92DB, Navy #0C2340, Red #C8102E, White #FFFFFF */

:root[data-theme="titans"] {
  /* Core accent — Titans Blue */
  --ring: #4B92DB;
  --accent: #4B92DB;
  --accent-hover: #6AAEE6;
  --accent-muted: #4B92DB;
  --accent-subtle: #4B92DB1f;
  --accent-glow: #4B92DB33;
  --primary: #4B92DB;
  --primary-foreground: #ffffff;
  --focus: #4B92DB33;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow);

  /* Backgrounds — deep navy palette */
  --bg: #060f1c;
  --bg-accent: #0a1729;
  --bg-elevated: #0f1e33;
  --bg-hover: #152540;
  --bg-muted: #152540;
  --bg-content: #0a1729;

  /* Cards and panels */
  --card: #0c1a2e;
  --card-foreground: #e8eef5;
  --card-highlight: #4B92DB0a;
  --popover: #0f1e33;
  --popover-foreground: #e8eef5;
  --panel: #060f1c;
  --panel-strong: #0f1e33;
  --panel-hover: #152540;
  --chrome: #060f1cf5;
  --chrome-strong: #060f1cfa;

  /* Text */
  --text: #b8cfe6;
  --text-strong: #e8eef5;
  --chat-text: #b8cfe6;
  --muted: #4d6b8a;
  --muted-strong: #3d5a77;
  --muted-foreground: #4d6b8a;

  /* Borders */
  --border: #0e2340;
  --border-strong: #1a3a5c;
  --border-hover: #4B92DB40;
  --input: #0e2340;

  /* Secondary colors */
  --secondary: #0c1a2e;
  --secondary-foreground: #e8eef5;

  /* Accent 2 — Titans Red */
  --accent-2: #C8102E;
  --accent-2-muted: #C8102Eb3;
  --accent-2-subtle: #C8102E1f;

  /* Status colors */
  --ok: #22c55e;
  --ok-muted: #22c55ebf;
  --ok-subtle: #22c55e14;
  --destructive: #C8102E;
  --destructive-foreground: #ffffff;
  --warn: #f59e0b;
  --warn-muted: #f59e0bbf;
  --warn-subtle: #f59e0b14;
  --danger: #C8102E;
  --danger-muted: #C8102Ebf;
  --danger-subtle: #C8102E14;
  --info: #4B92DB;

  /* Shadows */
  --shadow-sm: 0 1px 2px #00000066;
  --shadow-md: 0 4px 16px #00000080;
  --shadow-lg: 0 12px 32px #0000009a;
  --shadow-xl: 0 24px 48px #000000a0;
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* Grid */
  --grid-line: #4B92DB08;

  color-scheme: dark;
}

/* Light mode variant */
:root[data-theme="titans-light"] {
  --ring: #0C2340;
  --accent: #0C2340;
  --accent-hover: #1a3a5c;
  --accent-muted: #0C2340;
  --accent-subtle: #0C234014;
  --accent-glow: #0C23401f;
  --primary: #0C2340;
  --primary-foreground: #ffffff;
  --focus: #0C234026;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 12px var(--accent-glow);

  /* Light backgrounds */
  --bg: #f4f7fb;
  --bg-accent: #eaf0f8;
  --bg-elevated: #ffffff;
  --bg-hover: #dde8f4;
  --bg-muted: #dde8f4;
  --bg-content: #eaf0f8;

  /* Cards */
  --card: #ffffff;
  --card-foreground: #0C2340;
  --card-highlight: #0C23400a;
  --popover: #ffffff;
  --popover-foreground: #0C2340;
  --panel: #f4f7fb;
  --panel-strong: #eaf0f8;
  --panel-hover: #d5e3f0;
  --chrome: #f4f7fbf5;
  --chrome-strong: #f4f7fbfa;

  /* Text */
  --text: #1a3050;
  --text-strong: #0C2340;
  --chat-text: #1a3050;
  --muted: #5a7a9a;
  --muted-strong: #3d5a77;
  --muted-foreground: #5a7a9a;

  /* Borders */
  --border: #c8d9eb;
  --border-strong: #a8c0d8;
  --border-hover: #4B92DB;
  --input: #c8d9eb;

  /* Secondary */
  --secondary: #eaf0f8;
  --secondary-foreground: #1a3050;

  /* Accent 2 — Titans Red */
  --accent-2: #C8102E;
  --accent-2-muted: #C8102Ebf;
  --accent-2-subtle: #C8102E14;

  /* Status */
  --ok: #15803d;
  --ok-muted: #15803dbf;
  --ok-subtle: #15803d14;
  --destructive: #C8102E;
  --destructive-foreground: #ffffff;
  --warn: #b45309;
  --warn-muted: #b45309bf;
  --warn-subtle: #b4530914;
  --danger: #C8102E;
  --danger-muted: #C8102Ebf;
  --danger-subtle: #C8102E14;
  --info: #0C2340;

  /* Shadows */
  --shadow-sm: 0 1px 2px #0C23400a;
  --shadow-md: 0 4px 12px #0C23400f;
  --shadow-lg: 0 12px 28px #0C234014;
  --shadow-xl: 0 24px 48px #0C23401a;
  --shadow-glow: 0 0 20px var(--accent-glow);
  --grid-line: #0C23400a;

  color-scheme: light;
}

/* ── Subtle Titans Shield watermark ─────────────────────────────────────────
   SVG data URI of simplified shield/T shape at very low opacity.
   Only visible if you look for it — decorative background element.
   ─────────────────────────────────────────────────────────────────────────── */

:root[data-theme="titans"] .sidebar,
:root[data-theme="titans-light"] .sidebar {
  position: relative;
}

:root[data-theme="titans"] .sidebar::before,
:root[data-theme="titans-light"] .sidebar::before {
  content: "";
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%23ffffff' d='M50 0 L95 15 L95 60 Q95 95 50 115 Q5 95 5 60 L5 15 Z'/%3E%3Crect fill='%230C2340' x='20' y='30' width='60' height='14' rx='3'/%3E%3Crect fill='%230C2340' x='42' y='44' width='16' height='38' rx='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
}

:root[data-theme="titans-light"] .sidebar::before {
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%230C2340' d='M50 0 L95 15 L95 60 Q95 95 50 115 Q5 95 5 60 L5 15 Z'/%3E%3Crect fill='%23ffffff' x='20' y='30' width='60' height='14' rx='3'/%3E%3Crect fill='%23ffffff' x='42' y='44' width='16' height='38' rx='3'/%3E%3C/svg%3E");
}

/* Titans Red as the CTA/destructive button color */
:root[data-theme="titans"] .btn.primary,
:root[data-theme="titans-light"] .btn.primary {
  border-color: #C8102E;
  background: #C8102E;
  color: #ffffff;
  box-shadow: 0 1px 3px #C8102E33;
}

:root[data-theme="titans"] .btn.primary:hover,
:root[data-theme="titans-light"] .btn.primary:hover {
  background: #e01535;
  border-color: #e01535;
  box-shadow: 0 2px 12px #C8102E44;
}

/* Nav active item gets a Titans Blue left accent bar */
:root[data-theme="titans"] .nav-item.active,
:root[data-theme="titans"] .nav-item--active {
  border-color: color-mix(in srgb, #4B92DB 22%, transparent);
  background: color-mix(in srgb, #4B92DB 12%, var(--bg-elevated));
}

:root[data-theme="titans"] .nav-item.active .nav-item__icon,
:root[data-theme="titans"] .nav-item--active .nav-item__icon {
  color: #4B92DB;
}

/* Stars: subtle 3-star motif in the topbar using box shadows */
:root[data-theme="titans"] .topbar,
:root[data-theme="titans-light"] .topbar {
  border-bottom-color: color-mix(in srgb, #4B92DB 20%, transparent);
}