/* ============================================================
   TARS Theme — Auros Dark Teal
   Edit this file to retheme the entire app.
   Loaded before styles.css — variables cascade into all rules.
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  /* Render native controls (select popups, scrollbars, date pickers) dark —
     without this, Chromium paints <option> lists on a white background and the
     light --text-primary text becomes white-on-white. TARS is dark-only. */
  color-scheme: dark;

  /* Backgrounds */
  --bg-primary:   #070e0d;
  --bg-secondary: #0b1614;
  --bg-tertiary:  #122220;
  --bg-hover:     #1a302d;

  /* Borders */
  --border-color: #162825;
  /* Aliases for names used inline across index.html/styles.css that were never
     defined — undefined vars made form controls render white-on-white (no bg,
     no border). Map them to the real tokens. */
  --border: var(--border-color);
  --bg-surface: var(--bg-tertiary);

  /* Text */
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #6e7681;

  /* Accent — drives buttons, links, active tab bar, avatars */
  --accent:       #2dd4bf;
  --accent-hover: #5eead4;

  /* Semantic */
  --success: #3fb950;
  --warning: #d29922;
  --danger:  #f85149;

  /* Typography */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow: 0 8px 24px rgba(0,0,0,0.4);

  /* Glow colours */
  --glow-primary:   rgba(0, 210, 175, 0.28);
  --glow-secondary: rgba(0, 170, 140, 0.12);
  --glow-accent:    rgba(0, 150, 210, 0.08);
}

/* --- Atmospheric glow --------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 100% 70% at 50% 115%, var(--glow-primary) 0%, var(--glow-secondary) 45%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 105%, var(--glow-accent) 0%, transparent 65%);
}

/* --- Loading / splash screen ------------------------------- */
.loading-overlay {
  background:
    radial-gradient(ellipse 100% 70% at 50% 115%, var(--glow-primary) 0%, var(--glow-secondary) 45%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 105%, var(--glow-accent) 0%, transparent 65%),
    var(--bg-primary);
}
.loading-tars {
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 50%, transparent));
}
.loading-spinner {
  border-color: var(--border-color);
  border-top-color: var(--accent);
}

/* --- Header ------------------------------------------------- */
.app-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 97%, transparent) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  backdrop-filter: blur(12px);
}

/* --- Sidebars ----------------------------------------------- */
.chat-sidebar {
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  backdrop-filter: blur(4px);
}
.calendar-sidebar {
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
  backdrop-filter: blur(4px);
}

/* --- Active tab bar ----------------------------------------- */
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- Chat avatars ------------------------------------------- */
.chat-message.assistant .message-avatar {
  background: linear-gradient(135deg, #0d9488 0%, var(--accent) 60%, var(--accent-hover) 100%);
  color: #031a18;
  font-weight: 700;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-message.user .message-avatar {
  background: linear-gradient(135deg, #0f2b28 0%, #1a3f3b 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text-secondary);
}

/* --- "Set me up" pulse button ------------------------------ */
.quick-action-pulse {
  animation: pulse-teal 2s ease-in-out infinite;
}
@keyframes pulse-teal {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 50%, transparent); }
  50%       { box-shadow: 0 0 8px 3px color-mix(in srgb, var(--accent) 40%, transparent); }
}

/* --- FullCalendar event colours ----------------------------- */
.fc {
  --fc-event-bg-color:     color-mix(in srgb, var(--accent) 25%, transparent);
  --fc-event-border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  --fc-today-bg-color:     color-mix(in srgb, var(--accent)  5%, transparent);
  --fc-now-indicator-color: var(--accent);
  --fc-button-active-bg-color:     var(--accent);
  --fc-button-active-border-color: var(--accent);
}