/* ═══════════════════════════════════════════════════════════════════════════
   FT Admin Theme Token System
   Single source of truth for all admin UI colors, typography, spacing.
   Usage: set data-ft-theme="dark"|"light" on html or layout root.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared (theme-agnostic) tokens ─── */
:root {
    /* Typography */
    --ft-font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    --ft-font-size-xs: 0.68rem;
    --ft-font-size-sm: 0.8125rem;
    --ft-font-size-md: 0.875rem;
    --ft-font-size-lg: 1rem;
    --ft-font-size-xl: 1.25rem;
    --ft-font-weight-normal: 400;
    --ft-font-weight-medium: 500;
    --ft-font-weight-semibold: 600;
    --ft-font-weight-bold: 700;

    /* Spacing scale (4px base) */
    --ft-space-1: 0.25rem;
    --ft-space-2: 0.5rem;
    --ft-space-3: 0.75rem;
    --ft-space-4: 1rem;
    --ft-space-5: 1.25rem;
    --ft-space-6: 1.5rem;
    --ft-space-7: 2rem;
    --ft-space-8: 2.5rem;

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

    /* Layout dimensions */
    --ft-sidebar-collapsed: 72px;
    --ft-sidebar-expanded: 280px;
    --ft-header-height: 64px;
    --ft-drawer-width: 380px;

    /* Transitions */
    --ft-transition-fast: 0.15s ease;
    --ft-transition-normal: 0.2s ease;
    --ft-transition-slow: 0.3s ease;
}

/* ─── Dark theme (HUD command center — default)
   PRD alias: command-dark (Salı MVP theme switcher) ─── */
:root,
[data-ft-theme="dark"],
[data-ft-theme="command-dark"] {
    /* Surfaces */
    --ft-color-bg-page: #060a12;
    --ft-color-bg-surface: #0d1320;
    --ft-color-bg-elevated: #141c2e;
    --ft-color-bg-sidebar: #0c1220;
    --ft-color-bg-glass: rgba(13, 19, 32, 0.72);
    --ft-color-bg-input: rgba(6, 10, 18, 0.65);

    /* Brand */
    --ft-color-primary: #22d3ee;
    --ft-color-primary-hover: #67e8f9;
    --ft-color-accent-cyan: #22d3ee;
    --ft-color-accent-blue: #3b82f6;
    --ft-color-accent-purple: #a855f7;

    /* Text */
    --ft-color-text-primary: #e8eef7;
    --ft-color-text-secondary: #8b9cb8;
    --ft-color-text-muted: #64748b;
    --ft-color-text-inverse: #ffffff;

    /* Borders */
    --ft-color-border: rgba(56, 189, 248, 0.14);
    --ft-color-border-strong: rgba(34, 211, 238, 0.32);

    /* Semantic */
    --ft-color-success: #22c55e;
    --ft-color-success-bg: rgba(34, 197, 94, 0.12);
    --ft-color-success-text: #86efac;
    --ft-color-warning: #f59e0b;
    --ft-color-warning-bg: rgba(245, 158, 11, 0.12);
    --ft-color-warning-text: #fcd34d;
    --ft-color-danger: #ef4444;
    --ft-color-danger-bg: rgba(239, 68, 68, 0.12);
    --ft-color-danger-text: #fca5a5;
    --ft-color-info: #3b82f6;
    --ft-color-info-bg: rgba(59, 130, 246, 0.12);
    --ft-color-info-text: #93c5fd;

    /* Shadows */
    --ft-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --ft-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.45);
    --ft-shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.55);
    --ft-shadow-glow: 0 0 20px rgba(34, 211, 238, 0.12);

    /* Gradients */
    --ft-gradient-cta: linear-gradient(135deg, #0891b2 0%, #2563eb 55%, #22d3ee 100%);
    --ft-gradient-cta-hover: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #67e8f9 100%);
    --ft-gradient-banner: linear-gradient(135deg, rgba(8, 145, 178, 0.35) 0%, rgba(37, 99, 235, 0.25) 55%, rgba(34, 211, 238, 0.15) 100%);
    --ft-gradient-sidebar: linear-gradient(180deg, #0c1220 0%, #060a12 100%);
    --ft-gradient-topbar: linear-gradient(90deg, #0a0f1a 0%, #0d1320 50%, #0a0f1a 100%);

    /* Component tokens */
    --ft-btn-primary-bg: var(--ft-gradient-cta);
    --ft-btn-primary-text: #ffffff;
    --ft-btn-secondary-bg: rgba(34, 211, 238, 0.1);
    --ft-btn-secondary-text: var(--ft-color-primary);
    --ft-btn-danger-bg: linear-gradient(135deg, #dc2626, #ef4444);
    --ft-btn-danger-text: #ffffff;

    --ft-card-bg: var(--ft-color-bg-elevated);
    --ft-card-border: var(--ft-color-border);
    --ft-card-shadow: var(--ft-shadow-sm);

    --ft-table-header-bg: rgba(20, 28, 46, 0.95);
    --ft-table-row-hover: rgba(34, 211, 238, 0.06);
    --ft-table-row-alt: rgba(13, 19, 32, 0.5);
    --ft-table-border: var(--ft-color-border);

    --ft-badge-default-bg: rgba(139, 156, 184, 0.15);
    --ft-badge-default-text: var(--ft-color-text-secondary);
    --ft-badge-primary-bg: rgba(34, 211, 238, 0.15);
    --ft-badge-primary-text: var(--ft-color-primary);
    --ft-badge-success-bg: var(--ft-color-success-bg);
    --ft-badge-success-text: var(--ft-color-success-text);
    --ft-badge-warning-bg: var(--ft-color-warning-bg);
    --ft-badge-warning-text: var(--ft-color-warning-text);
    --ft-badge-danger-bg: var(--ft-color-danger-bg);
    --ft-badge-danger-text: var(--ft-color-danger-text);
    --ft-badge-info-bg: var(--ft-color-info-bg);
    --ft-badge-info-text: var(--ft-color-info-text);

    --ft-sidebar-active-bg: rgba(34, 211, 238, 0.11);
    --ft-sidebar-active-text: var(--ft-color-primary);
    --ft-sidebar-hover-bg: rgba(34, 211, 238, 0.07);

    --ft-page-banner-bg: var(--ft-gradient-banner);
    --ft-page-banner-border: var(--ft-color-border-strong);
    --ft-page-banner-text: var(--ft-color-text-primary);

    --ft-search-bg: var(--ft-color-bg-input);
    --ft-search-border: var(--ft-color-border);
    --ft-search-focus-border: var(--ft-color-primary);

    --ft-filter-panel-bg: var(--ft-color-bg-elevated);
    --ft-filter-panel-border: var(--ft-color-border);

    --ft-stat-card-bg: var(--ft-color-bg-elevated);
    --ft-stat-card-value: var(--ft-color-primary);
}

/* ─── Executive Light (PRD investor default — soft brand align)
   Brand: primary #233a91 · success #69b93b · canvas #f4f7fb
   PRD aliases: --ft-bg-canvas / --ft-action-primary mapped below ─── */
[data-ft-theme="light"],
[data-ft-theme="executive-light"],
[data-ft-komuta-theme="executive-light"] {
    /* PRD semantic aliases */
    --ft-bg-canvas: #f4f7fb;
    --ft-action-primary: #233a91;
    --ft-action-success: #69b93b;

    --ft-color-bg-page: #f4f7fb;
    --ft-color-bg-surface: #ffffff;
    --ft-color-bg-elevated: #ffffff;
    --ft-color-bg-sidebar: #ffffff;
    --ft-color-bg-glass: rgba(255, 255, 255, 0.94);
    --ft-color-bg-input: #ffffff;

    --ft-color-primary: #233a91;
    --ft-color-primary-hover: #1b2f78;
    --ft-color-accent-cyan: #3d5bb5;
    --ft-color-accent-blue: #233a91;
    --ft-color-accent-purple: #4a3d8f;

    --ft-color-text-primary: #0f172a;
    --ft-color-text-secondary: #475569;
    --ft-color-text-muted: #94a3b8;
    --ft-color-text-inverse: #ffffff;

    --ft-color-border: #e2e8f0;
    --ft-color-border-strong: #cbd5e1;

    --ft-color-success: #69b93b;
    --ft-color-success-bg: rgba(105, 185, 59, 0.14);
    --ft-color-success-text: #3f7a22;
    --ft-color-warning: #d97706;
    --ft-color-warning-bg: #fef3c7;
    --ft-color-warning-text: #92400e;
    --ft-color-danger: #dc2626;
    --ft-color-danger-bg: #fee2e2;
    --ft-color-danger-text: #991b1b;
    --ft-color-info: #233a91;
    --ft-color-info-bg: rgba(35, 58, 145, 0.1);
    --ft-color-info-text: #1b2f78;

    --ft-shadow-sm: 0 1px 3px rgba(15, 35, 80, 0.08);
    --ft-shadow-md: 0 4px 12px rgba(15, 35, 80, 0.1);
    --ft-shadow-lg: 0 8px 24px rgba(15, 35, 80, 0.12);
    --ft-shadow-glow: none;

    --ft-gradient-cta: linear-gradient(135deg, #233a91 0%, #3d5bb5 55%, #69b93b 100%);
    --ft-gradient-cta-hover: linear-gradient(135deg, #1b2f78 0%, #233a91 50%, #5aa832 100%);
    --ft-gradient-banner: linear-gradient(135deg, #233a91 0%, #3d5bb5 55%, #69b93b 100%);
    --ft-gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    --ft-gradient-topbar: linear-gradient(90deg, #ffffff 0%, #f4f7fb 50%, #ffffff 100%);

    --ft-btn-primary-bg: var(--ft-gradient-cta);
    --ft-btn-primary-text: #ffffff;
    --ft-btn-secondary-bg: rgba(35, 58, 145, 0.08);
    --ft-btn-secondary-text: #233a91;
    --ft-card-bg: #ffffff;
    --ft-table-header-bg: #eef2f8;
    --ft-table-row-hover: rgba(35, 58, 145, 0.05);
    --ft-table-row-alt: #f8fafc;
    --ft-table-border: #e2e8f0;

    --ft-badge-default-bg: #eef2f8;
    --ft-badge-default-text: #475569;
    --ft-badge-primary-bg: rgba(35, 58, 145, 0.12);
    --ft-badge-primary-text: #233a91;
    --ft-badge-success-bg: rgba(105, 185, 59, 0.16);
    --ft-badge-success-text: #3f7a22;
    --ft-badge-warning-bg: #fef3c7;
    --ft-badge-warning-text: #92400e;
    --ft-badge-danger-bg: #fee2e2;
    --ft-badge-danger-text: #991b1b;
    --ft-badge-info-bg: rgba(35, 58, 145, 0.1);
    --ft-badge-info-text: #1b2f78;

    --ft-sidebar-active-bg: rgba(35, 58, 145, 0.1);
    --ft-sidebar-active-text: #233a91;
    --ft-sidebar-hover-bg: rgba(35, 58, 145, 0.05);

    --ft-page-banner-bg: var(--ft-gradient-banner);
    --ft-page-banner-border: transparent;
    --ft-page-banner-text: #ffffff;

    --ft-search-bg: #ffffff;
    --ft-search-border: #e2e8f0;
    --ft-filter-panel-bg: #ffffff;
    --ft-filter-panel-border: #e2e8f0;
    --ft-stat-card-bg: #ffffff;
    --ft-stat-card-value: #233a91;
}

/* AI Workspace — stay on tokens under Executive Light (no cyan island) */
[data-ft-komuta-theme="executive-light"] .ft-ai-workspace,
[data-ft-theme="light"] .ft-ai-workspace,
[data-ft-theme="executive-light"] .ft-ai-workspace {
    --ft-ai-accent: var(--ft-color-primary);
    --ft-action-primary: var(--ft-color-primary);
    border-color: var(--ft-color-border);
    background: var(--ft-color-bg-surface);
    color: var(--ft-color-text-primary);
}

[data-ft-komuta-theme="executive-light"] .ft-ai-workspace .ft-ai-chip,
[data-ft-komuta-theme="executive-light"] .ft-ai-workspace .hud-ai-chip {
    border-color: color-mix(in srgb, var(--ft-color-primary) 35%, transparent);
    color: var(--ft-color-primary);
}

[data-ft-komuta-theme="executive-light"] .ft-ai-workspace .hud-ai-drawer-title {
    color: var(--ft-color-primary);
}

/* Density evidence surfaces (AC-02) — AI list spacing follows data-ft-density */
[data-ft-density="compact"] .ft-ai-workspace .ft-ai-list li,
[data-ft-density="compact"] .ft-ai-workspace .ft-ai-context > div {
    padding-block: 0.15rem;
}

[data-ft-density="comfortable"] .ft-ai-workspace .ft-ai-list li,
[data-ft-density="comfortable"] .ft-ai-workspace .ft-ai-context > div {
    padding-block: 0.35rem;
}

/* ─── Market Terminal (PRD §9.1 — compact ops / Atlas / Worker)
   Lighter critical set: surfaces + text + accent; denser spacing via data-ft-density ─── */
[data-ft-theme="terminal"],
[data-ft-komuta-theme="market-terminal"] {
    --ft-color-bg-page: #07110d;
    --ft-color-bg-surface: #0c1a14;
    --ft-color-bg-elevated: #12241c;
    --ft-color-bg-sidebar: #0a1611;
    --ft-color-bg-glass: rgba(12, 26, 20, 0.78);
    --ft-color-bg-input: rgba(7, 17, 13, 0.7);

    --ft-color-primary: #34d399;
    --ft-color-primary-hover: #6ee7b7;
    --ft-color-accent-cyan: #2dd4bf;
    --ft-color-accent-blue: #38bdf8;
    --ft-color-accent-purple: #a3e635;

    --ft-color-text-primary: #e7f5ee;
    --ft-color-text-secondary: #8fb9a4;
    --ft-color-text-muted: #5f8a74;
    --ft-color-text-inverse: #04110b;

    --ft-color-border: rgba(52, 211, 153, 0.18);
    --ft-color-border-strong: rgba(52, 211, 153, 0.38);

    --ft-color-success: #22c55e;
    --ft-color-success-bg: rgba(34, 197, 94, 0.14);
    --ft-color-success-text: #86efac;
    --ft-color-warning: #fbbf24;
    --ft-color-warning-bg: rgba(251, 191, 36, 0.14);
    --ft-color-warning-text: #fde68a;
    --ft-color-danger: #f87171;
    --ft-color-danger-bg: rgba(248, 113, 113, 0.14);
    --ft-color-danger-text: #fecaca;
    --ft-color-info: #38bdf8;
    --ft-color-info-bg: rgba(56, 189, 248, 0.12);
    --ft-color-info-text: #bae6fd;

    --ft-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --ft-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --ft-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55);
    --ft-shadow-glow: 0 0 18px rgba(52, 211, 153, 0.14);

    --ft-gradient-cta: linear-gradient(135deg, #059669 0%, #0d9488 55%, #34d399 100%);
    --ft-gradient-cta-hover: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #6ee7b7 100%);
    --ft-gradient-banner: linear-gradient(135deg, rgba(5, 150, 105, 0.35) 0%, rgba(13, 148, 136, 0.22) 55%, rgba(52, 211, 153, 0.12) 100%);
    --ft-gradient-sidebar: linear-gradient(180deg, #0a1611 0%, #07110d 100%);
    --ft-gradient-topbar: linear-gradient(90deg, #08140f 0%, #0c1a14 50%, #08140f 100%);

    --ft-btn-secondary-bg: rgba(52, 211, 153, 0.1);
    --ft-btn-secondary-text: var(--ft-color-primary);
    --ft-card-bg: var(--ft-color-bg-elevated);
    --ft-table-header-bg: rgba(18, 36, 28, 0.95);
    --ft-table-row-hover: rgba(52, 211, 153, 0.07);
    --ft-table-row-alt: rgba(12, 26, 20, 0.55);
    --ft-sidebar-active-bg: rgba(52, 211, 153, 0.12);
    --ft-sidebar-active-text: var(--ft-color-primary);
    --ft-sidebar-hover-bg: rgba(52, 211, 153, 0.07);
    --ft-stat-card-value: var(--ft-color-primary);
    --ft-badge-primary-bg: rgba(52, 211, 153, 0.16);
    --ft-badge-primary-text: var(--ft-color-primary);
}

/* ─── High Contrast (PRD §9.1 — WCAG-oriented critical set) ─── */
[data-ft-theme="hc"],
[data-ft-komuta-theme="high-contrast"] {
    --ft-color-bg-page: #000000;
    --ft-color-bg-surface: #0a0a0a;
    --ft-color-bg-elevated: #141414;
    --ft-color-bg-sidebar: #000000;
    --ft-color-bg-glass: rgba(0, 0, 0, 0.92);
    --ft-color-bg-input: #000000;

    --ft-color-primary: #ffff00;
    --ft-color-primary-hover: #ffff66;
    --ft-color-accent-cyan: #00ffff;
    --ft-color-accent-blue: #66b3ff;
    --ft-color-accent-purple: #ff66ff;

    --ft-color-text-primary: #ffffff;
    --ft-color-text-secondary: #f0f0f0;
    --ft-color-text-muted: #c8c8c8;
    --ft-color-text-inverse: #000000;

    --ft-color-border: #ffffff;
    --ft-color-border-strong: #ffff00;

    --ft-color-success: #00ff66;
    --ft-color-success-bg: rgba(0, 255, 102, 0.18);
    --ft-color-success-text: #00ff66;
    --ft-color-warning: #ffcc00;
    --ft-color-warning-bg: rgba(255, 204, 0, 0.2);
    --ft-color-warning-text: #ffcc00;
    --ft-color-danger: #ff3333;
    --ft-color-danger-bg: rgba(255, 51, 51, 0.2);
    --ft-color-danger-text: #ff6666;
    --ft-color-info: #66b3ff;
    --ft-color-info-bg: rgba(102, 179, 255, 0.2);
    --ft-color-info-text: #99ccff;

    --ft-shadow-sm: none;
    --ft-shadow-md: none;
    --ft-shadow-lg: none;
    --ft-shadow-glow: none;

    --ft-gradient-cta: #ffff00;
    --ft-gradient-cta-hover: #ffff66;
    --ft-gradient-banner: #141414;
    --ft-gradient-sidebar: #000000;
    --ft-gradient-topbar: #000000;

    --ft-btn-primary-bg: #ffff00;
    --ft-btn-primary-text: #000000;
    --ft-btn-secondary-bg: #000000;
    --ft-btn-secondary-text: #ffff00;
    --ft-card-bg: #0a0a0a;
    --ft-card-border: #ffffff;
    --ft-table-header-bg: #1a1a1a;
    --ft-table-row-hover: #222222;
    --ft-table-row-alt: #111111;
    --ft-table-border: #ffffff;
    --ft-sidebar-active-bg: #ffff00;
    --ft-sidebar-active-text: #000000;
    --ft-sidebar-hover-bg: #1a1a1a;
    --ft-page-banner-bg: #141414;
    --ft-page-banner-border: #ffff00;
    --ft-page-banner-text: #ffffff;
    --ft-search-bg: #000000;
    --ft-search-border: #ffffff;
    --ft-search-focus-border: #ffff00;
    --ft-stat-card-bg: #0a0a0a;
    --ft-stat-card-value: #ffff00;
    --ft-badge-primary-bg: #ffff00;
    --ft-badge-primary-text: #000000;
}

/* Focus ring boost for high contrast */
[data-ft-komuta-theme="high-contrast"] *:focus-visible {
    outline: 3px solid var(--ft-color-primary) !important;
    outline-offset: 2px;
}