/* Microsoft Modern - Fluent 2 inspired overrides */

[data-brand-theme="microsoft"] {
  --font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Segoe UI Variable Display', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #60a5fa;
  --primary-glow: rgba(37, 99, 235, 0.22);
  --primary-container: rgba(37, 99, 235, 0.14);
  --on-primary-container: #dbeafe;
  --accent: #0f6cbd;
  --surface-1: #111827;
  --surface-2: #1f2937;
  --hairline: rgba(148, 163, 184, 0.18);
  --hairline-strong: rgba(148, 163, 184, 0.3);
  --glass-bg: rgba(20, 20, 20, 0.8);
  --glass-blur: 32px;
}

[data-brand-theme="microsoft"][data-theme="light"] {
  --primary: #0f6cbd;
  --primary-hover: #115ea3;
  --primary-light: #0f6cbd;
  --primary-glow: rgba(15, 108, 189, 0.16);
  --primary-container: #e5f1fb;
  --on-primary-container: #0f4a7a;
  --accent: #0078d4;
  --surface-1: #ffffff;
  --surface-2: #f5f5f5;
  --hairline: #e0e0e0;
  --hairline-strong: #c7c7c7;
  --glass-bg: rgba(255, 255, 255, 0.8);
}

/* Complete visual-token contract: Fluent surfaces apply to embedded modules too. */
[data-brand-theme="microsoft"] {
  --font-mono: 'Cascadia Code', ui-monospace, monospace;
  --canvas: #1b1a19; --bg-primary: #1b1a19; --bg-secondary: #252423;
  --surface-3: #323130; --surface-hover: #323130; --surface-tonal: rgba(96, 165, 250, .14);
  --ink: #f3f2f1; --ink-muted: #c8c6c4; --ink-subtle: #a19f9d; --on-primary: #ffffff;
  --border: var(--hairline); --border-strong: var(--hairline-strong);
  --success: #6bb700; --warning: #ffb900; --danger: #ff99a4; --info: #60cdff;
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28); --shadow: 0 2px 6px rgba(0,0,0,.32); --shadow-lg: 0 8px 24px rgba(0,0,0,.38);
}
[data-brand-theme="microsoft"][data-theme="light"] {
  --font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif; --font-display: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; --font-mono: 'Cascadia Code', ui-monospace, monospace;
  --canvas: #f5f5f5; --bg-primary: #f5f5f5; --bg-secondary: #ffffff;
  --surface-3: #ededed; --surface-hover: #ededed; --surface-tonal: #e5f1fb;
  --ink: #242424; --ink-muted: #616161; --ink-subtle: #8a8886; --on-primary: #ffffff;
  --border: var(--hairline); --border-strong: var(--hairline-strong);
  --success: #107c10; --warning: #986f0b; --danger: #c50f1f; --info: #0f6cbd;
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow: 0 2px 6px rgba(0,0,0,.12); --shadow-lg: 0 8px 24px rgba(0,0,0,.14);
}

[data-brand-theme="microsoft"] .card,
[data-brand-theme="microsoft"] .metric-card,
[data-brand-theme="microsoft"] .kpi-card {
  border-radius: 12px;
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
}

[data-brand-theme="microsoft"] .card:hover,
[data-brand-theme="microsoft"] .metric-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

[data-brand-theme="microsoft"] .kanban__card {
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
}
[data-brand-theme="microsoft"] .kanban__card:hover {
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
}
[data-brand-theme="microsoft"] .modal {
  box-shadow: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
}

/* ── Brand Loader — Fluent smooth ring ── */
[data-brand-theme="microsoft"] .spinner {
  border-width: 2px;
  border-top-color: var(--primary);
  animation: spin 0.85s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

/* ── Ambient Backdrop — Mesh gradient ── */
[data-brand-theme="microsoft"] #ambient-backdrop-canvas::before,
[data-brand-theme="microsoft"] #ambient-backdrop-canvas::after {
  border-radius: 0;
  filter: blur(60px);
  opacity: 0.16;
  background: conic-gradient(from 120deg at 30% 20%, #2563eb, #60a5fa, #0f6cbd, #2563eb);
  animation-name: ambient-mesh-shift;
  animation-duration: 30s;
  animation-timing-function: linear;
}
[data-brand-theme="microsoft"] #ambient-backdrop-canvas::after {
  background: conic-gradient(from 300deg at 70% 80%, #0f6cbd, #2563eb, #60a5fa, #0f6cbd);
  animation-duration: 38s;
}
[data-brand-theme="microsoft"][data-theme="light"] #ambient-backdrop-canvas::before,
[data-brand-theme="microsoft"][data-theme="light"] #ambient-backdrop-canvas::after {
  opacity: 0.08;
}
@keyframes ambient-mesh-shift {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Acrylic — crisper saturation on translucent chrome surfaces */
[data-brand-theme="microsoft"] #bottom-nav,
[data-brand-theme="microsoft"] #sidebar,
[data-brand-theme="microsoft"] #top-bar {
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

[data-brand-theme="microsoft"] .btn,
[data-brand-theme="microsoft"] .form-input,
[data-brand-theme="microsoft"] .form-select,
[data-brand-theme="microsoft"] .form-textarea,
[data-brand-theme="microsoft"] .quick-action-chip,
[data-brand-theme="microsoft"] .tab-btn,
[data-brand-theme="microsoft"] .bottom-nav__icon-wrapper {
  border-radius: 6px;
}

[data-brand-theme="microsoft"] .sidebar__item {
  border-radius: 8px;
}

[data-brand-theme="microsoft"] .sidebar__item--active {
  background: var(--primary-container);
  color: var(--primary-light);
}

[data-brand-theme="microsoft"][data-theme="light"] .sidebar__item--active {
  color: var(--primary);
}

[data-brand-theme="microsoft"] .modal,
[data-brand-theme="microsoft"] .cmd-palette {
  border-radius: 12px !important;
}

[data-brand-theme="microsoft"] .kanban__card,
[data-brand-theme="microsoft"] .kanban__placeholder {
  border-radius: 10px;
}

[data-brand-theme="microsoft"] .kanban__card:hover {
  transform: translateY(-4px);
}

[data-brand-theme="microsoft"] .fluent-icon {
  font-family: 'Segoe Fluent Icons', 'Segoe MDL2 Assets', sans-serif !important;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-brand-theme="microsoft"] .bottom-sheet {
  border-radius: 12px 12px 0 0;
}

[data-brand-theme="microsoft"] .bottom-sheet__icon-wrapper {
  border-radius: 6px;
}