/* ==========================================================================
   LLM Connect — Design tokens
   Signature idea: presence -> connection -> call. The accent color IS the
   product's online-status color, echoed everywhere from message ticks to
   the "Meet" button.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: local('Fraunces');
  font-display: swap;
}

:root {
  /* -- Light theme (default) -- */
  --bg: #F7F7FB;
  --surface: #FFFFFF;
  --surface-alt: #F0F1F8;
  --surface-hover: #E9EAF5;
  --ink: #14172B;
  --muted: #6B6F8C;
  --faint: #9598B5;
  --border: #E3E4EF;
  --border-strong: #CBCDE2;

  --signal: #1B365D;        /* brand / online / primary actions - navy blue */
  --signal-ink: #10243E;
  --signal-tint: #E8EEF8;
  --signal-text: #FFFFFF;
  --ring: #E85A48;          /* meet / call / destructive-adjacent CTA */
  --ring-ink: #C4432F;
  --ring-tint: #FDEBE8;
  --away: #C98A1E;
  --away-tint: #FBF0DC;
  --offline: #A6A9C0;

  --danger: #D6423A;
  --danger-tint: #FBEAE9;

  --shadow-sm: 0 1px 2px rgba(20, 23, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 23, 43, 0.08);
  --shadow-lg: 0 12px 40px rgba(20, 23, 43, 0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar-width: 300px;
  --header-height: 64px;
}

[data-theme="dark"] {
  --bg: #000000;
  --surface: #0c0c0c;
  --surface-alt: #161616;
  --surface-hover: #202020;
  --ink: #f0f0f0;
  --muted: #9e9e9e;
  --faint: #666666;
  --border: #222222;
  --border-strong: #333333;

  --signal: #FACC15;        /* vibrant light yellow on black */
  --signal-ink: #FEF08A;
  --signal-tint: #362804;
  --signal-text: #000000;
  --ring: #ff5e4d;
  --ring-ink: #ff8577;
  --ring-tint: #3b1410;
  --away: #f59e0b;
  --away-tint: #3d2a06;
  --offline: #666666;

  --danger: #ef4444;
  --danger-tint: #3b1111;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.95);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #000000;
    --surface: #0c0c0c;
    --surface-alt: #161616;
    --surface-hover: #202020;
    --ink: #f0f0f0;
    --muted: #9e9e9e;
    --faint: #666666;
    --border: #222222;
    --border-strong: #333333;

    --signal: #FACC15;
    --signal-ink: #FEF08A;
    --signal-tint: #362804;
    --signal-text: #000000;
    --ring: #ff5e4d;
    --ring-ink: #ff8577;
    --ring-tint: #3b1410;
    --away: #f59e0b;
    --away-tint: #3d2a06;
    --offline: #666666;

    --danger: #ef4444;
    --danger-tint: #3b1111;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.95);
  }
}