/* ═══════════════════════════════════════════════════════════════════════
   Design tokens — loaded on every page, before every other stylesheet.

   These used to live in chat.css, which only the chat page loads, so the
   light values were undefined everywhere else (dark-theme.css already
   shipped its own copies site-wide). Moving them here is what lets
   controls.css give the whole product one set of shapes and colours.

   --cf-accent is the one colour a page acts with: the brand blue by
   default, and the chat's indigo inside the chat (chat.css re-points it).
   Everything else in controls.css is derived from it.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Chat surface tokens (light). dark-theme.css overrides all of
       these under .dark-theme. ── */
    --chat-sidebar-width: 280px;
    --chat-sidebar-bg: #f7f8fa;
    --chat-sidebar-border: #e8eaef;
    --chat-sidebar-hover: #edf0f5;
    --chat-sidebar-active: #dce6f7;
    --chat-sidebar-text: #3a3f4b;
    --chat-sidebar-muted: #8b90a0;
    --chat-bg: #ffffff;
    --chat-surface: #f4f5f7;
    --chat-border: #e5e7eb;
    --chat-text: #1a1d26;
    --chat-text-secondary: #6b7280;
    --chat-user-bg: #eef2ff;
    --chat-user-border: #dbe1fd;
    --chat-assistant-bg: transparent;
    --chat-input-bg: #ffffff;
    --chat-input-border: #d1d5db;
    --chat-input-focus: #6366f1;
    --chat-input-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    --chat-accent: #6366f1;
    --chat-accent-hover: #4f46e5;
    --chat-accent-subtle: rgba(99, 102, 241, 0.08);
    --chat-radius: 12px;
    --chat-radius-sm: 8px;
    --chat-radius-xs: 6px;
    --chat-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --chat-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --chat-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --chat-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
    --chat-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.1);

    /* ── Control shapes, shared by every page ── */
    --cf-radius-control: 10px;    /* buttons, inputs, selects */
    --cf-radius-panel: 14px;      /* cards, alerts, panels    */
    --cf-radius-menu: 12px;       /* dropdown menus           */

    /* ── The acting colour. CodingFleet blue outside the chat. ── */
    --cf-accent: #0066cc;
    --cf-accent-hover: #0055aa;
    --cf-accent-contrast: #ffffff;
    --cf-accent-subtle: rgba(0, 102, 204, 0.10);
    --cf-focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.18);
}

/* Dark keeps the same blue: dark-theme.css already forces #06c on primary
   buttons inside cards, and a second, brighter accent beside it read as two
   different blues on one page. Only the hover and the ring change. */
.dark-theme {
    --cf-accent: #0066cc;
    --cf-accent-hover: #0b7ae6;
    --cf-accent-contrast: #ffffff;
    --cf-accent-subtle: rgba(13, 122, 230, 0.18);
    --cf-focus-ring: 0 0 0 3px rgba(13, 122, 230, 0.30);
}