/**
 * Appearance tokens: scheme (light/dark) × theme (ocean/material/cupertino)
 * Applied on document.documentElement via appearance.ts
 */

/* Fallback before JS hydrates (ocean · dark) */
html {
  color-scheme: dark;
  --app-theme-color: #0b0c10;
  --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
  --app-text: #f1f5f9;
  --app-text-heading: #f8fafc;
  --app-text-muted: #94a3b8;
  --app-text-subtle: #64748b;
  --app-surface: rgba(11, 12, 16, 0.75);
  --app-surface-alt: rgba(11, 12, 16, 0.6);
  --app-surface-hover: rgba(11, 12, 16, 0.85);
  --app-surface-inset: rgba(255, 255, 255, 0.02);
  --app-border: rgba(212, 175, 55, 0.25);
  --app-border-subtle: rgba(255, 255, 255, 0.08);
  --app-border-muted: rgba(212, 175, 55, 0.15);
  --app-input-bg: rgba(11, 12, 16, 0.85);
  --app-input-bg-focus: #0b0c10;
  --app-input-border: rgba(148, 163, 184, 0.25);
  --app-input-text: #f1f5f9;
  --app-accent: #d97706;
  --app-accent-light: #fbbf24;
  --app-accent-gradient: linear-gradient(135deg, #fef08a 0%, #d97706 100%);
  --app-accent-bg: rgba(217, 119, 6, 0.1);
  --app-accent-border: rgba(217, 119, 6, 0.2);
  --app-accent-focus-ring: rgba(217, 119, 6, 0.2);
  --app-btn-primary-text: #0b0c10;
  --app-btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --app-btn-secondary-border: rgba(255, 255, 255, 0.12);
  --app-btn-secondary-text: #e2e8f0;
  --app-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
  --app-icon-btn-bg: rgba(255, 255, 255, 0.05);
  --app-icon-btn-border: rgba(255, 255, 255, 0.1);
  --app-divider: rgba(255, 255, 255, 0.06);
  --app-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --app-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  --app-error-bg: rgba(244, 63, 94, 0.08);
  --app-error-text: #fda4af;
  --app-error-border: #f43f5e;
  --app-warning-text: #f43f5e;
  --app-warning-bg: rgba(244, 63, 94, 0.08);
  --app-warning-border: rgba(244, 63, 94, 0.2);
  --app-empty-border: rgba(255, 255, 255, 0.08);
  --app-empty-bg: rgba(255, 255, 255, 0.02);
  --app-sidebar-active-bg: rgba(217, 119, 6, 0.12);
  --app-sidebar-active-border: #d97706;
  --app-sidebar-active-text: #fbbf24;
  --app-header-border: rgba(212, 175, 55, 0.15);
  --app-table-border: rgba(255, 255, 255, 0.08);
  --app-progress-bar: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
  --app-backdrop: blur(20px);
  --app-radius-card: 16px;
  --app-radius-input: 10px;
  --app-radius-btn: 10px;
}

/* ===== OCEAN · DARK (default) ===== */
html.scheme-dark.theme-ocean {
  color-scheme: dark;
  --app-theme-color: #0b0c10;
  --app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
  --app-text: #f1f5f9;
  --app-text-heading: #f8fafc;
  --app-text-muted: #94a3b8;
  --app-text-subtle: #64748b;
  --app-surface: rgba(11, 12, 16, 0.75);
  --app-surface-alt: rgba(11, 12, 16, 0.6);
  --app-surface-hover: rgba(11, 12, 16, 0.85);
  --app-surface-inset: rgba(255, 255, 255, 0.02);
  --app-border: rgba(212, 175, 55, 0.25);
  --app-border-subtle: rgba(255, 255, 255, 0.08);
  --app-border-muted: rgba(212, 175, 55, 0.15);
  --app-input-bg: rgba(11, 12, 16, 0.85);
  --app-input-bg-focus: #0b0c10;
  --app-input-border: rgba(148, 163, 184, 0.25);
  --app-input-text: #f1f5f9;
  --app-accent: #d97706;
  --app-accent-light: #fbbf24;
  --app-accent-gradient: linear-gradient(135deg, #fef08a 0%, #d97706 100%);
  --app-accent-bg: rgba(217, 119, 6, 0.1);
  --app-accent-border: rgba(217, 119, 6, 0.2);
  --app-accent-focus-ring: rgba(217, 119, 6, 0.2);
  --app-btn-primary-text: #0b0c10;
  --app-btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --app-btn-secondary-border: rgba(255, 255, 255, 0.12);
  --app-btn-secondary-text: #e2e8f0;
  --app-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
  --app-icon-btn-bg: rgba(255, 255, 255, 0.05);
  --app-icon-btn-border: rgba(255, 255, 255, 0.1);
  --app-divider: rgba(255, 255, 255, 0.06);
  --app-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --app-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  --app-error-bg: rgba(244, 63, 94, 0.08);
  --app-error-text: #fda4af;
  --app-error-border: #f43f5e;
  --app-warning-text: #f43f5e;
  --app-warning-bg: rgba(244, 63, 94, 0.08);
  --app-warning-border: rgba(244, 63, 94, 0.2);
  --app-empty-border: rgba(255, 255, 255, 0.08);
  --app-empty-bg: rgba(255, 255, 255, 0.02);
  --app-sidebar-active-bg: rgba(217, 119, 6, 0.12);
  --app-sidebar-active-border: #d97706;
  --app-sidebar-active-text: #fbbf24;
  --app-header-border: rgba(212, 175, 55, 0.15);
  --app-table-border: rgba(255, 255, 255, 0.08);
  --app-progress-bar: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
  --app-backdrop: blur(20px);
  --app-radius-card: 16px;
  --app-radius-input: 10px;
  --app-radius-btn: 10px;
}

/* ===== OCEAN · LIGHT ===== */
html.scheme-light.theme-ocean {
  color-scheme: light;
  --app-theme-color: #e2e8f0;
  --app-body-bg: linear-gradient(165deg, #dbeafe 0%, #f8fafc 42%, #e2e8f0 100%);
  --app-text: #1e293b;
  --app-text-heading: #0f172a;
  --app-text-muted: #475569;
  --app-text-subtle: #64748b;
  --app-surface: rgba(255, 255, 255, 0.88);
  --app-surface-alt: rgba(255, 255, 255, 0.78);
  --app-surface-hover: rgba(255, 255, 255, 0.96);
  --app-surface-inset: rgba(15, 23, 42, 0.03);
  --app-border: rgba(217, 119, 6, 0.28);
  --app-border-subtle: rgba(15, 23, 42, 0.1);
  --app-border-muted: rgba(217, 119, 6, 0.18);
  --app-input-bg: #ffffff;
  --app-input-bg-focus: #ffffff;
  --app-input-border: rgba(100, 116, 139, 0.35);
  --app-input-text: #0f172a;
  --app-accent: #b45309;
  --app-accent-light: #d97706;
  --app-accent-gradient: linear-gradient(135deg, #fcd34d 0%, #b45309 100%);
  --app-accent-bg: rgba(217, 119, 6, 0.12);
  --app-accent-border: rgba(217, 119, 6, 0.25);
  --app-accent-focus-ring: rgba(217, 119, 6, 0.25);
  --app-btn-primary-text: #0b0c10;
  --app-btn-secondary-bg: rgba(15, 23, 42, 0.04);
  --app-btn-secondary-border: rgba(15, 23, 42, 0.12);
  --app-btn-secondary-text: #334155;
  --app-btn-secondary-hover-bg: rgba(15, 23, 42, 0.07);
  --app-icon-btn-bg: rgba(15, 23, 42, 0.04);
  --app-icon-btn-border: rgba(15, 23, 42, 0.1);
  --app-divider: rgba(15, 23, 42, 0.08);
  --app-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --app-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  --app-error-bg: rgba(244, 63, 94, 0.08);
  --app-error-text: #be123c;
  --app-error-border: #e11d48;
  --app-warning-text: #be123c;
  --app-warning-bg: rgba(244, 63, 94, 0.06);
  --app-warning-border: rgba(244, 63, 94, 0.2);
  --app-empty-border: rgba(15, 23, 42, 0.12);
  --app-empty-bg: rgba(15, 23, 42, 0.02);
  --app-sidebar-active-bg: rgba(217, 119, 6, 0.1);
  --app-sidebar-active-border: #d97706;
  --app-sidebar-active-text: #b45309;
  --app-header-border: rgba(217, 119, 6, 0.2);
  --app-table-border: rgba(15, 23, 42, 0.1);
  --app-progress-bar: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
  --app-backdrop: blur(20px);
  --app-radius-card: 16px;
  --app-radius-input: 10px;
  --app-radius-btn: 10px;
}

/* ===== MATERIAL · DARK ===== */
html.scheme-dark.theme-material {
  color-scheme: dark;
  --app-theme-color: #121212;
  --app-body-bg: #121212;
  --app-text: #f1f5f9;
  --app-text-heading: #f8fafc;
  --app-text-muted: #94a3b8;
  --app-text-subtle: #64748b;
  --app-surface: #1e1e1e;
  --app-surface-alt: #1e1e1e;
  --app-surface-hover: #252525;
  --app-surface-inset: #2a2a2a;
  --app-border: #2d2d2d;
  --app-border-subtle: #2d2d2d;
  --app-border-muted: #2d2d2d;
  --app-input-bg: #2a2a2a;
  --app-input-bg-focus: #2a2a2a;
  --app-input-border: #3d3d3d;
  --app-input-text: #f1f5f9;
  --app-accent: #00adb5;
  --app-accent-light: #00adb5;
  --app-accent-gradient: linear-gradient(135deg, #00adb5 0%, #008f95 100%);
  --app-accent-bg: rgba(0, 173, 181, 0.12);
  --app-accent-border: rgba(0, 173, 181, 0.3);
  --app-accent-focus-ring: rgba(0, 173, 181, 0.2);
  --app-btn-primary-text: #ffffff;
  --app-btn-secondary-bg: #2a2a2a;
  --app-btn-secondary-border: #3d3d3d;
  --app-btn-secondary-text: #f1f5f9;
  --app-btn-secondary-hover-bg: #333333;
  --app-icon-btn-bg: #2a2a2a;
  --app-icon-btn-border: #3d3d3d;
  --app-divider: #2d2d2d;
  --app-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --app-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --app-error-bg: rgba(244, 63, 94, 0.08);
  --app-error-text: #fda4af;
  --app-error-border: #f43f5e;
  --app-warning-text: #f43f5e;
  --app-warning-bg: rgba(244, 63, 94, 0.08);
  --app-warning-border: rgba(244, 63, 94, 0.2);
  --app-empty-border: #2d2d2d;
  --app-empty-bg: #1a1a1a;
  --app-sidebar-active-bg: rgba(0, 173, 181, 0.08);
  --app-sidebar-active-border: #00adb5;
  --app-sidebar-active-text: #00adb5;
  --app-header-border: #2d2d2d;
  --app-table-border: #2d2d2d;
  --app-progress-bar: linear-gradient(90deg, #00adb5, #008f95, #00adb5);
  --app-backdrop: none;
  --app-radius-card: 4px;
  --app-radius-input: 4px;
  --app-radius-btn: 4px;
}

/* ===== MATERIAL · LIGHT ===== */
html.scheme-light.theme-material {
  color-scheme: light;
  --app-theme-color: #fafafa;
  --app-body-bg: #fafafa;
  --app-text: #212121;
  --app-text-heading: #111827;
  --app-text-muted: #616161;
  --app-text-subtle: #757575;
  --app-surface: #ffffff;
  --app-surface-alt: #ffffff;
  --app-surface-hover: #f5f5f5;
  --app-surface-inset: #f5f5f5;
  --app-border: #e0e0e0;
  --app-border-subtle: #eeeeee;
  --app-border-muted: #e0e0e0;
  --app-input-bg: #ffffff;
  --app-input-bg-focus: #ffffff;
  --app-input-border: #bdbdbd;
  --app-input-text: #212121;
  --app-accent: #00838f;
  --app-accent-light: #00838f;
  --app-accent-gradient: linear-gradient(135deg, #00838f 0%, #006064 100%);
  --app-accent-bg: rgba(0, 131, 143, 0.1);
  --app-accent-border: rgba(0, 131, 143, 0.25);
  --app-accent-focus-ring: rgba(0, 131, 143, 0.2);
  --app-btn-primary-text: #ffffff;
  --app-btn-secondary-bg: #f5f5f5;
  --app-btn-secondary-border: #e0e0e0;
  --app-btn-secondary-text: #424242;
  --app-btn-secondary-hover-bg: #eeeeee;
  --app-icon-btn-bg: #f5f5f5;
  --app-icon-btn-border: #e0e0e0;
  --app-divider: #e0e0e0;
  --app-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --app-error-bg: rgba(244, 63, 94, 0.08);
  --app-error-text: #be123c;
  --app-error-border: #e11d48;
  --app-warning-text: #be123c;
  --app-warning-bg: rgba(244, 63, 94, 0.06);
  --app-warning-border: rgba(244, 63, 94, 0.2);
  --app-empty-border: #e0e0e0;
  --app-empty-bg: #fafafa;
  --app-sidebar-active-bg: rgba(0, 131, 143, 0.08);
  --app-sidebar-active-border: #00838f;
  --app-sidebar-active-text: #00838f;
  --app-header-border: #e0e0e0;
  --app-table-border: #e0e0e0;
  --app-progress-bar: linear-gradient(90deg, #00838f, #00adb5, #00838f);
  --app-backdrop: none;
  --app-radius-card: 4px;
  --app-radius-input: 4px;
  --app-radius-btn: 4px;
}

/* ===== CUPERTINO · DARK ===== */
html.scheme-dark.theme-cupertino {
  color-scheme: dark;
  --app-theme-color: #000000;
  --app-body-bg: #000000;
  --app-text: #ffffff;
  --app-text-heading: #ffffff;
  --app-text-muted: #aeaeb2;
  --app-text-subtle: #8e8e93;
  --app-surface: rgba(28, 28, 30, 0.72);
  --app-surface-alt: rgba(28, 28, 30, 0.72);
  --app-surface-hover: rgba(44, 44, 46, 0.85);
  --app-surface-inset: rgba(255, 255, 255, 0.05);
  --app-border: rgba(255, 255, 255, 0.1);
  --app-border-subtle: rgba(255, 255, 255, 0.1);
  --app-border-muted: rgba(255, 255, 255, 0.08);
  --app-input-bg: rgba(255, 255, 255, 0.05);
  --app-input-bg-focus: rgba(255, 255, 255, 0.07);
  --app-input-border: rgba(255, 255, 255, 0.12);
  --app-input-text: #ffffff;
  --app-accent: #0a84ff;
  --app-accent-light: #0a84ff;
  --app-accent-gradient: linear-gradient(135deg, #0a84ff 0%, #007aff 100%);
  --app-accent-bg: rgba(10, 132, 255, 0.12);
  --app-accent-border: rgba(10, 132, 255, 0.3);
  --app-accent-focus-ring: rgba(10, 132, 255, 0.25);
  --app-btn-primary-text: #ffffff;
  --app-btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --app-btn-secondary-border: rgba(255, 255, 255, 0.12);
  --app-btn-secondary-text: #ffffff;
  --app-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
  --app-icon-btn-bg: rgba(255, 255, 255, 0.08);
  --app-icon-btn-border: rgba(255, 255, 255, 0.12);
  --app-divider: rgba(255, 255, 255, 0.08);
  --app-shadow: none;
  --app-card-shadow: none;
  --app-error-bg: rgba(255, 69, 58, 0.12);
  --app-error-text: #ff6961;
  --app-error-border: #ff453a;
  --app-warning-text: #ff6961;
  --app-warning-bg: rgba(255, 69, 58, 0.12);
  --app-warning-border: rgba(255, 69, 58, 0.25);
  --app-empty-border: rgba(255, 255, 255, 0.1);
  --app-empty-bg: rgba(255, 255, 255, 0.04);
  --app-sidebar-active-bg: rgba(10, 132, 255, 0.15);
  --app-sidebar-active-border: #0a84ff;
  --app-sidebar-active-text: #0a84ff;
  --app-header-border: rgba(255, 255, 255, 0.1);
  --app-table-border: rgba(255, 255, 255, 0.1);
  --app-progress-bar: linear-gradient(90deg, #0a84ff, #007aff, #0a84ff);
  --app-backdrop: blur(25px);
  --app-radius-card: 12px;
  --app-radius-input: 8px;
  --app-radius-btn: 9999px;
}

/* ===== CUPERTINO · LIGHT ===== */
html.scheme-light.theme-cupertino {
  color-scheme: light;
  --app-theme-color: #f2f2f7;
  --app-body-bg: #f2f2f7;
  --app-text: #1c1c1e;
  --app-text-heading: #000000;
  --app-text-muted: #636366;
  --app-text-subtle: #8e8e93;
  --app-surface: rgba(255, 255, 255, 0.82);
  --app-surface-alt: rgba(255, 255, 255, 0.82);
  --app-surface-hover: rgba(255, 255, 255, 0.95);
  --app-surface-inset: rgba(0, 0, 0, 0.03);
  --app-border: rgba(0, 0, 0, 0.08);
  --app-border-subtle: rgba(0, 0, 0, 0.06);
  --app-border-muted: rgba(0, 0, 0, 0.08);
  --app-input-bg: #ffffff;
  --app-input-bg-focus: #ffffff;
  --app-input-border: rgba(0, 0, 0, 0.12);
  --app-input-text: #1c1c1e;
  --app-accent: #007aff;
  --app-accent-light: #007aff;
  --app-accent-gradient: linear-gradient(135deg, #007aff 0%, #0a84ff 100%);
  --app-accent-bg: rgba(0, 122, 255, 0.1);
  --app-accent-border: rgba(0, 122, 255, 0.25);
  --app-accent-focus-ring: rgba(0, 122, 255, 0.2);
  --app-btn-primary-text: #ffffff;
  --app-btn-secondary-bg: rgba(0, 0, 0, 0.05);
  --app-btn-secondary-border: rgba(0, 0, 0, 0.08);
  --app-btn-secondary-text: #1c1c1e;
  --app-btn-secondary-hover-bg: rgba(0, 0, 0, 0.08);
  --app-icon-btn-bg: rgba(0, 0, 0, 0.05);
  --app-icon-btn-border: rgba(0, 0, 0, 0.08);
  --app-divider: rgba(0, 0, 0, 0.08);
  --app-shadow: none;
  --app-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --app-error-bg: rgba(255, 59, 48, 0.1);
  --app-error-text: #d70015;
  --app-error-border: #ff3b30;
  --app-warning-text: #d70015;
  --app-warning-bg: rgba(255, 59, 48, 0.08);
  --app-warning-border: rgba(255, 59, 48, 0.2);
  --app-empty-border: rgba(0, 0, 0, 0.08);
  --app-empty-bg: rgba(0, 0, 0, 0.02);
  --app-sidebar-active-bg: rgba(0, 122, 255, 0.1);
  --app-sidebar-active-border: #007aff;
  --app-sidebar-active-text: #007aff;
  --app-header-border: rgba(0, 0, 0, 0.08);
  --app-table-border: rgba(0, 0, 0, 0.08);
  --app-progress-bar: linear-gradient(90deg, #007aff, #0a84ff, #007aff);
  --app-backdrop: blur(25px);
  --app-radius-card: 12px;
  --app-radius-input: 8px;
  --app-radius-btn: 9999px;
}

/* Utility classes for inline-style migration */
.text-muted { color: var(--app-text-muted); }
.text-subtle { color: var(--app-text-subtle); }
.text-heading { color: var(--app-text-heading); }

html.scheme-light #root {
  border-inline-color: var(--app-border-subtle);
}

/* Bridge legacy index.css tokens to appearance (avoids system color-scheme drift) */
html.scheme-light,
html.scheme-dark {
  --text: var(--app-text);
  --text-h: var(--app-text-heading);
  --code-bg: var(--app-icon-btn-bg);
  --border: var(--app-border-subtle);
}