/* ============================================
 * Design Tokens — Single source of truth
 * ============================================
 * Both public.css and app.css import this file.
 * Only bundle entry points should @import tokens.css.
 * Individual CSS files must NOT import it directly
 * (esbuild does not deduplicate @imports).
 * ============================================ */

:root {
    /* Legacy semantic aliases */
    --background-color: var(--surface-canvas);
    --border-color: var(--border-default);
    --text-color: var(--text-primary);
    --surface-secondary: var(--surface-sunken);
    --color-success: var(--status-success);
    --color-warning: var(--status-warning);
    --color-danger: var(--status-danger);

    /* Color tokens */
    --text-primary: #333;
    --text-secondary: #666;
    --primary-color: #000;
    --primary-color-dark: #1d4ed8;
    --color-success-bg: #ecfdf5;
    --color-warning-bg: #fffbeb;
    --hover-bg: #f8f8f8;
    --surface-hover: #f5f5f5;
    --text-tertiary: #8e8e93;
    --text-quaternary: #aeaeb2;
    --color-accent: #007aff;

    /* Brand palette */
    --brand-black: #1b1b1b;
    --brand-dark-blue: #47696b;
    --brand-light-blue: #638b8d;
    --brand-yellow: #e3e6a6;
    --brand-white: #fff;
    --brand-grey: #edede9;
    --brand-medium-grey: #adada8;
    --brand-surface-muted: #f6f4ef;
    --brand-border-soft: rgb(71 105 107 / 18%);
    --brand-text-muted: rgb(27 27 27 / 74%);

    /* Actions */
    --action-primary-bg: #333;
    --action-primary-bg-hover: #2c2c2e;
    --action-primary-bg-pressed: #444;
    --action-primary-fg: #fff;
    --action-primary-border: var(--action-primary-bg);
    --action-accent-bg: var(--brand-dark-blue);
    --action-accent-bg-hover: #35585a;
    --action-accent-bg-pressed: #2b484a;
    --action-accent-fg: #fff;
    --action-accent-border: var(--action-accent-bg);
    --action-accent-border-soft: var(--brand-border-soft);
    --action-secondary-bg: var(--surface-canvas);
    --action-secondary-bg-hover: rgb(71 105 107 / 5%);
    --action-secondary-fg: var(--text-strong);
    --action-secondary-border: var(--action-accent-border-soft);
    --action-secondary-border-hover: rgb(71 105 107 / 34%);
    --action-ghost-bg: transparent;
    --action-ghost-bg-hover: var(--surface-hover);
    --action-ghost-fg: var(--text-secondary);
    --action-danger-bg: #b04a3f;
    --action-danger-bg-hover: #963f36;
    --action-danger-bg-pressed: #7f352e;
    --action-danger-fg: #fff;
    --action-danger-border: var(--action-danger-bg);
    --action-disabled-bg: rgb(27 27 27 / 6%);
    --action-disabled-fg: var(--text-tertiary);
    --action-disabled-border: var(--border-default);
    --action-focus-ring: var(--brand-dark-blue);
    --action-dark-bg: #111827;
    --action-dark-bg-hover: #374151;

    /* Surfaces */
    --surface-canvas: #fff;
    --surface-raised: #f8f8f8;
    --surface-sunken: #f0f0f0;
    --scrim: rgb(0 0 0 / 50%);

    /* Borders & focus */
    --border-default: #e5e5e5;
    --border-interactive: #eaeaea;
    --focus-ring: #5e9cff;

    /* Content */
    --text-strong: #1c1c1e;
    --link-color: #3182ce;
    --scrollbar-thumb: #ddd;

    /* Inverse chrome */
    --surface-inverse: #1c1c1e;
    --text-on-inverse: #fff;
    --tooltip-bg: rgb(0 0 0 / 80%);
    --icon-disabled: #c7c7cc;
    --control-fg-muted: #6e6e73;
    --control-border: #dedee3;

    /* Status */
    --status-running: #007aff;
    --status-unread: #ef4444;
    --status-success: #059669;
    --status-warning: #d97706;
    --status-danger: #ef4444;

    /* Radius scale */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Motion scale */
    --motion-fast: 0.15s;
    --motion-base: 0.2s;
    --motion-slow: 0.3s;
    --ease-standard: ease;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows */
    --shadow-xs: 0 1px 3px rgb(0 0 0 / 5%);
    --shadow-sm: 0 2px 4px rgb(0 0 0 / 10%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 10%);
    --shadow-elevated: 0 10px 24px rgb(0 0 0 / 16%);
    --shadow-modal: 0 4px 24px rgb(0 0 0 / 12%);
    --shadow-popover: 0 2px 8px rgb(0 0 0 / 20%);
    --shadow-avatar: 0 1px 2px rgb(0 0 0 / 10%);
    --shadow-input-subtle: 0 2px 8px rgb(0 0 0 / 5%);
    --shadow-mobile-input: 0 -2px 10px rgb(0 0 0 / 10%);
    --shadow-panel: 0 1px 3px rgb(0 0 0 / 10%);
    --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 5%);
    --shadow-card-slate: 0 1px 2px rgb(15 23 42 / 10%);
    --shadow-settings-modal: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
    --shadow-modal-deep: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
    --shadow-toast: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    --shadow-toast-floating: 0 4px 12px rgb(0 0 0 / 15%);
    --shadow-source-news: 0 1px 3px rgb(0 0 0 / 6%);
    --shadow-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 80%);
    --control-thumb-shadow: 0 0 0 0.625px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 16%);

    /* App component palettes
     * Quarantined literal tokens: names reflect the first migration consumer,
     * not long-term ownership. Avoid adding new tokens here; shrink over time. */
    --scrim-soft: rgb(0 0 0 / 40%);
    --scrim-strong: rgb(0 0 0 / 70%);
    --surface-overlay-light: rgb(255 255 255 / 95%);
    --surface-overlay-wash: rgb(255 255 255 / 70%);
    --surface-overlay-header: rgb(255 255 255 / 98%);
    --surface-slate: #f1f5f9;
    --surface-slate-light: #f8fafc;
    --surface-gradient-subtle: linear-gradient(to bottom, #fafafa, #fff);
    --surface-gradient-subtle-reverse: linear-gradient(to bottom, #fff, #fafafa);
    --surface-gradient-contact: linear-gradient(to bottom, #fff, #fafbfc);
    --surface-gradient-task-header: linear-gradient(to bottom, #fff, #f5f5f5);
    --surface-alpha-soft: rgb(0 0 0 / 4%);
    --surface-alpha-faint: rgb(0 0 0 / 3%);
    --surface-alpha-muted: rgb(0 0 0 / 6%);
    --border-alpha-muted: rgb(0 0 0 / 10%);
    --border-github: #e1e4e8;
    --border-muted: #e5e7eb;
    --border-slate: #cbd5e0;
    --border-slate-muted: #d1d5db;
    --scrollbar-thumb-strong: rgb(0 0 0 / 20%);
    --scrollbar-thumb-muted: #d4d4d4;
    --scrollbar-thumb-hover: #a8a8a8;
    --scrollbar-thumb-slate: #cbd5e1;
    --content-heading: #111827;
    --content-body: #1f2937;
    --content-muted: #6b7280;
    --content-muted-strong: #4b5563;
    --content-muted-alt: #555;
    --content-subtle: #9ca3af;
    --content-faint: #999;
    --content-neutral: #444;
    --content-near-black: #1a1a1a;
    --content-github-muted: #8b949e;
    --auth-text-muted: #888;
    --auth-google-text: #757575;
    --auth-input-focus-border: #d0d0d0;
    --auth-google-border: #dadce0;
    --auth-google-bg: #fafafa;
    --auth-input-focus-shadow: 0 0 0 1px rgb(0 0 0 / 5%);
    --source-modal-title: #111;
    --source-modal-accent: #6366f1;
    --terminal-user: #58a6ff;
    --control-disabled-bg: #9ca3af;
    --focus-ring-action: 0 0 0 2px rgb(37 99 235 / 20%);
    --info-banner-text: #4a5568;
    --info-banner-bg: #f7fafc;
    --info-banner-border: #e2e8f0;
    --file-chip-bg: #eef2ff;
    --file-chip-fg: #4f46e5;
    --link-color-strong: #2563eb;
    --link-color-bright: #3b82f6;
    --link-bg-soft: #dbeafe;
    --link-bg-pale: #eff6ff;
    --legacy-blue: #06c;
    --legacy-blue-hover: #0052a3;
    --bootstrap-blue: #007bff;
    --bootstrap-blue-hover: #0056b3;
    --whatsapp-bg: #25d366;
    --whatsapp-bg-hover: #1ebe57;
    --status-success-bright: #10b981;
    --toast-success-bg: #6b9e87;
    --toast-error-bg: #d47a7a;
    --toast-warning-bg: #d4a574;
    --toast-info-bg: #7a9fd4;
    --success-bg: #ecfdf5;
    --success-bg-soft: #f0fdf4;
    --success-bg-muted: #d1fae5;
    --success-chip-bg: #dcfce7;
    --success-border: #bbf7d0;
    --success-text: #047857;
    --success-text-brand: #059669;
    --success-text-strong: #065f46;
    --success-text-dark: #166534;
    --verification-success-bg: #e6f4ea;
    --verification-success-text: #137333;
    --danger-bg: #fef2f2;
    --danger-bg-strong: #fee2e2;
    --danger-bg-subtle: rgb(220 38 38 / 5%);
    --legacy-danger-bg: rgb(220 53 69 / 10%);
    --danger-border: #fecaca;
    --danger-border-soft: #fee2e2;
    --danger-text: #dc2626;
    --legacy-danger-text: #dc3545;
    --danger-text-dark: #991b1b;
    --danger-text-strong: #b91c1c;
    --warning-bg: #fffbeb;
    --warning-chip-bg: #fef3c7;
    --warning-border: #fde68a;
    --warning-text: #92400e;
    --warning-text-brand: #d97706;
    --warning-solid: rgb(245 158 11);
    --contact-pending-bg: rgb(255 251 235 / 30%);
    --contact-pending-bg-hover: rgb(255 251 235 / 50%);
    --contact-pending-border: #f0b849;
    --wandb-yellow: #ffbe00;
    --wandb-yellow-hover: #e6ab00;
    --spinner-track: #f3f3f3;
    --spinner-accent: #3498db;
    --avatar-bg: #e0e0e0;
    --avatar-fallback-bg: #b3b3b5;
    --task-surface: #f9f9f9;
    --task-surface-quiet: #fafafa;
    --task-help-bg: #f7f9fb;
    --task-help-border: #e3e8ef;
    --task-help-text: #334155;
    --shadow-task-modal: 0 20px 40px rgb(0 0 0 / 15%);
    --shadow-task-item: 0 1px 2px rgb(0 0 0 / 5%);
    --shadow-task-form: 0 2px 6px rgb(0 0 0 / 5%);
    --shadow-task-hover: 0 3px 6px rgb(0 0 0 / 15%);
    --shadow-button-inset: inset 0 1px 3px rgb(0 0 0 / 20%);
    --shadow-input-inset: inset 0 2px 4px rgb(0 0 0 / 5%);
    --shadow-none-alpha: 0 0 0 0 rgb(0 0 0 / 0%);
    --shadow-pulse-soft: 0 0 8px 2px rgb(0 0 0 / 4%);
    --contact-disabled-bg: #ccc;
    --contact-disabled-border: #ccc;
    --otp-text: #1a202c;
    --shadow-contact: 0 2px 8px rgb(0 0 0 / 4%);
    --shadow-contact-strong: 0 2px 8px rgb(0 0 0 / 15%);
    --shadow-contact-highlight: 0 2px 8px rgb(0 0 0 / 8%), 0 0 0 3px rgb(6 108 204 / 10%);
    --focus-ring-contact: 0 0 0 2px rgb(6 108 204 / 10%);
    --focus-ring-blue-soft: 0 0 0 2px rgb(59 130 246 / 10%);
    --contact-highlight-gradient: linear-gradient(90deg, rgb(6 108 204 / 10%) 0%, transparent 100%);
    --transparent-bg: rgb(0 0 0 / 0%);
    --surface-alpha-strong: rgb(0 0 0 / 8%);
    --lightbox-control-bg: rgb(255 255 255 / 10%);
    --lightbox-control-hover-bg: rgb(255 255 255 / 20%);
    --call-success-bg: rgb(34 197 94 / 10%);
    --call-success-fg: rgb(34 197 94);
    --call-danger-bg: rgb(239 68 68 / 10%);
    --call-danger-fg: rgb(239 68 68);
    --call-info-bg: rgb(59 130 246 / 10%);
    --call-info-fg: rgb(59 130 246);
    --soundwave-active-bg: #2ecc71;
    --settings-loading-gradient: linear-gradient(90deg, #f9fafb 0%, #e5e7eb 50%, #f9fafb 100%);
    --network-gradient: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    --hpc-sky-bg: #f0f9ff;
    --hpc-sky-border: #bae6fd;
    --hpc-sky-chip-bg: #e0f2fe;
    --hpc-sky-heading: #0369a1;
    --hpc-sky-text: #0c4a6e;
    --daemon-delete-border: #fca5a5;
    --daemon-slurm-bg: #e0e7ff;
    --daemon-slurm-text: #3730a3;
    --daemon-cpu-text: #1e40af;
    --daemon-ram-bg: #f3e8ff;
    --daemon-ram-text: #6b21a8;
    --coordination-border: rgb(15 23 42 / 8%);
    --coordination-bg: rgb(255 255 255 / 98%);
    --coordination-text: #0f172a;
    --coordination-label: #64748b;
    --coordination-route: #111827;
    --coordination-body: #1f2937;
    --coordination-muted: #4b5563;
    --coordination-status-pending-bg: rgb(245 158 11 / 14%);
    --coordination-status-pending-fg: #92400e;
    --coordination-status-ready-bg: rgb(59 130 246 / 12%);
    --coordination-status-ready-fg: #1d4ed8;
    --coordination-status-delivered-bg: rgb(16 185 129 / 13%);
    --coordination-status-delivered-fg: #047857;
    --coordination-status-done-bg: rgb(15 23 42 / 8%);
    --coordination-status-done-fg: #334155;
    --coordination-status-cancelled-bg: rgb(239 68 68 / 12%);
    --coordination-status-cancelled-fg: #b91c1c;
    --coordination-status-neutral-bg: rgb(100 116 139 / 12%);
    --coordination-status-neutral-fg: #475569;
    --toast-success-icon: #34c759;
    --toast-error-icon: #ff3b30;
    --source-card-border: #eee;
    --source-card-hover-bg: #f9fafb;
    --source-card-hover-border: #ddd;
    --source-chip-bg: #f3f4f6;
    --source-chip-hover-bg: #e5e7eb;
    --terminal-bg: #f8f9fa;
    --terminal-fg: #1a1a2e;
    --terminal-border: #e0e0e0;
    --terminal-prompt: #16a34a;
    --terminal-command: #2563eb;
    --terminal-muted: #6b7280;
    --terminal-result: #374151;
    --terminal-output: #4b5563;
    --terminal-error: #dc2626;
    --terminal-json-bg: #f1f5f9;
    --terminal-todo-bg: rgb(59 130 246 / 5%);
    --terminal-file-write-bg: rgb(34 197 94 / 8%);
    --terminal-file-write-border: #22c55e;
    --terminal-file-read-bg: rgb(59 130 246 / 8%);
    --terminal-file-read-border: #3b82f6;
    --terminal-file-edit-bg: rgb(139 92 246 / 8%);
    --terminal-file-edit-border: #8b5cf6;
    --terminal-file-edit-name: #7c3aed;
    --search-surface: rgb(248 250 252 / 50%);
    --search-surface-hover: rgb(248 250 252 / 80%);
    --search-surface-soft-hover: rgb(248 250 252 / 30%);
    --search-border: rgb(226 232 240 / 50%);
    --search-border-hover: rgb(203 213 225 / 70%);
    --search-muted: #64748b;
    --search-muted-light: #94a3b8;
    --search-title: #1e293b;
    --search-snippet: #475569;
    --search-dark-chip-bg: #1e293b;
    --search-dark-compact-hover: rgb(30 41 59 / 30%);
    --search-dark-surface: rgb(15 23 42 / 50%);
    --search-dark-surface-hover: rgb(15 23 42 / 80%);
    --search-dark-border: rgb(51 65 85 / 50%);
    --search-dark-border-hover: rgb(71 85 105 / 70%);
    --search-dark-title: #f1f5f9;
    --search-dark-link: #60a5fa;
    --search-dark-chip-fg: #cbd5e1;

    /* Brand typography */
    --font-family-sans:
        inter, 'Inter Fallback', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell,
        'Open Sans', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Libre Baskerville', georgia, 'Times New Roman', serif;
    --font-family-mono:
        ui-monospace, sfmono-regular, 'SF Mono', menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Layout tokens */
    --app-height: 100vh;
    --button-hover-bg: rgb(0 0 0 / 4%);

    /* Z-index scale
     * Use these instead of raw numbers in new CSS.
     * Phase 5 will migrate existing raw values. */
    --z-base: 1;
    --z-content: 10;
    --z-elevated: 100;
    --z-sidebar: 900;
    --z-sticky: 1000;
    --z-header: 1001;
    --z-popover: 1100;
    --z-settings-modal: 1500;
    --z-auth: 9999;
    --z-toast: 10000;
    --z-max: 10001;
}

/* JS-managed variables — set dynamically at runtime.
 * Do NOT define static defaults here; JS calls
 * document.documentElement.style.setProperty() to set them.
 *
 * --sidebar-width    AppHeader.js, SidebarToggle.js, sidebarResize.js
 * --vh               ChatView.js
 * --mouse-x          tooltips.js
 * --mouse-y          tooltips.js
 */

/* Standard breakpoints (reference only — var() cannot be used in @media):
 * mobile:   480px
 * tablet:   768px
 * desktop: 1024px
 * wide:    1440px
 */