/*
 * Shared design tokens for the NCAB AI Advisor frontend.
 *
 * Single source of truth for color/spacing/radius/shadow/motion custom
 * properties, linked from every page in assistant/frontend/. Values below
 * are the dark-first slate/teal identity already in use in index.html —
 * this file does not change the palette, it centralizes it so all pages
 * (currently each duplicating their own :root block) can share and,
 * eventually, retheme from one place.
 *
 * Dark (:root) is the default theme; [data-theme="light"] overrides it.
 * Pages that don't yet implement the light-mode toggle simply never set
 * data-theme, so they keep rendering dark — no behavior change from
 * linking this file.
 */

:root {
    /* Type scale */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Brand / semantic colors */
    --color-primary: #0f766e;
    /* Teal-700 */
    --color-primary-hover: #115e59;
    /* Teal-800 */
    --color-primary-soft: rgba(15, 118, 110, 0.14);
    --color-primary-border-soft: rgba(15, 118, 110, 0.3);
    --color-primary-border-strong: rgba(15, 118, 110, 0.5);
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-accent-blue: #3b82f6;

    /* Confidence badge tiers (Phase 1) */
    --confidence-high: var(--color-success);
    --confidence-medium: var(--color-warning);
    --confidence-low: var(--color-danger);

    /* Text/icon color on top of a solid --color-primary background */
    --on-primary: #ffffff;

    /* Danger text/icon variants — distinct from --color-danger (used for
       borders/solid fills) because text needs enough contrast against
       whatever the current theme's page background is */
    --color-danger-text: #f87171;
    --color-danger-text-soft: #fecaca;
    --color-danger-strong: #dc2626;
    --color-danger-strong-hover: #b91c1c;

    /* Chat markdown links — default browser blue is illegible on dark UI,
       and these need their own light-mode values for contrast against a
       white page background (see [data-theme="light"] below) */
    --link-color: #6ee7b7;
    --link-color-hover: #a7f3d0;
    --link-color-visited: #5eead4;

    /* Dark theme (default) surfaces/text */
    --bg-page: #0f172a;
    /* Slate-900 */
    --bg-sidebar: #020617;
    /* Slate-950 */
    --bg-surface: #1e293b;
    /* Slate-800 */
    --bg-card: var(--bg-surface);
    --bg-hover: #334155;
    /* Slate-700 */
    --border-color: rgba(255, 255, 255, 0.1);

    --text-muted: #94a3b8;
    /* Slate-400 */
    --text-tertiary: #64748b;
    /* Slate-500 */
    --text-primary: #f8fafc;
    /* Slate-50 */
    --text-heading: #ffffff;
    --input-bg: rgba(255, 255, 255, 0.05);

    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-floating: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.25);

    --user-bubble-bg: var(--color-primary);
    --user-bubble-text: #ffffff;
    --assistant-bubble-bg: var(--bg-surface);
    --assistant-bubble-text: var(--text-primary);
}

[data-theme="light"] {
    --bg-page: #f8fafc;
    /* Slate-50 */
    --bg-sidebar: #f1f5f9;
    /* Slate-100 */
    --bg-surface: #ffffff;
    --bg-card: var(--bg-surface);
    --bg-hover: #e2e8f0;
    /* Slate-200 */
    --border-color: rgba(0, 0, 0, 0.1);

    --color-primary-soft: rgba(15, 118, 110, 0.1);

    /* Darker/stronger variants for legibility against a light page background */
    --color-danger-text: #dc2626;
    --color-danger-text-soft: #b91c1c;
    --link-color: #0f766e;
    --link-color-hover: #115e59;
    --link-color-visited: #0d9488;

    --text-muted: #64748b;
    /* Slate-500 */
    --text-tertiary: #94a3b8;
    /* Slate-400 */
    --text-primary: #0f172a;
    /* Slate-900 */
    --text-heading: #000000;
    --input-bg: rgba(0, 0, 0, 0.03);

    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-elevated: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-floating: 0 12px 28px -8px rgba(0, 0, 0, 0.18);

    --user-bubble-bg: #0f766e;
    --user-bubble-text: #ffffff;
    --assistant-bubble-bg: var(--bg-surface);
    --assistant-bubble-text: var(--text-primary);
}