/*
 * KRAKEN:OS operator refinement
 * Curated from the 2026-08-11 design merge package.
 *
 * This layer changes presentation only. Current routes, controls, event
 * handlers, validation, permissions, records, and API contracts remain the
 * authority. ui-regression-fixes.css intentionally loads after this file.
 */

:root {
  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #fafbfe;
  --text: #0e1a2b;
  --ink: #0e1a2b;
  --muted: #5b6b81;
  --subtle: #7c899d;
  --line: #dfe5ee;
  --line-soft: #edf1f6;
  --primary: #1b46c2;
  --primary-strong: #12369c;
  --teal: #0d9488;
  --cyan: #0891b2;
  --indigo: #4f46e5;
  --green: #168a46;
  --amber: #c86e05;
  --red: #c11f2f;
  --rose: #9f1239;
  --violet: #6d28d9;
  --gold: #a74c08;
  --deep-navy: #0e1a2b;
  --shadow: 0 1px 2px rgba(15, 26, 43, 0.06);
  --shadow-soft: 0 1px 2px rgba(15, 26, 43, 0.05);
  --glass-surface: #ffffff;
  --glass-surface-strong: #ffffff;
  --glass-surface-soft: #fafbfe;
  --glass-border: #dfe5ee;
  --glass-line: #edf1f6;
  --glass-highlight: transparent;
  --glass-shadow: 0 1px 2px rgba(15, 26, 43, 0.06);
  --glass-shadow-soft: 0 1px 2px rgba(15, 26, 43, 0.05);
  --glass-blur: 0px;
  --radius: 9px;
  --radius-sm: 7px;
  --font: "Plus Jakarta Sans", Satoshi, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --module-operate: #1b46c2;
  --module-sales: #9f1239;
  --module-work: #c86e05;
  --module-finance: #0d9488;
  --module-stock: #0891b2;
  --module-assets: #a74c08;
  --module-people: #6d28d9;
  --module-pos: #4f46e5;
  --module-stats: #0891b2;
  --module-aura: #6d28d9;
  --module-control: #475569;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a101b;
  --surface: #111a2b;
  --surface-2: #16203a;
  --surface-3: #0d1421;
  --text: #e8eef8;
  --ink: #e8eef8;
  --muted: #a0adc2;
  --subtle: #8290a8;
  --line: #263249;
  --line-soft: #1e2942;
  --primary: #86a8f2;
  --primary-strong: #a7c0f8;
  --teal: #59d6c7;
  --cyan: #65cae8;
  --indigo: #9a9cff;
  --green: #68dd9a;
  --amber: #f0b45e;
  --red: #ff8b8b;
  --rose: #ee8bad;
  --violet: #c29aff;
  --gold: #f0b45e;
  --deep-navy: #e8eef8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.32);
  --glass-surface: #111a2b;
  --glass-surface-strong: #111a2b;
  --glass-surface-soft: #16203a;
  --glass-border: #263249;
  --glass-line: #1e2942;
  --glass-highlight: transparent;
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
  --glass-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.32);
}

html,
body {
  font-variant-numeric: tabular-nums;
}

body {
  background:
    linear-gradient(180deg, #fafbfe 0%, #f1f4fa 100%),
    var(--bg);
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #0d1421 0%, #0a101b 100%),
    var(--bg);
}

.layout.os-layout-v10 {
  --sidebar: 224px;
  --topbar: 54px;
  --workspace-tabs-height: 40px;
  --shell-chrome-height: 94px;
  --page-gutter: 14px;
  --section-gap: 10px;
  --panel-pad: 12px;
  --control-height: 34px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}

.layout.os-layout-v10.density-compact {
  --sidebar: 218px;
  --topbar: 52px;
  --workspace-tabs-height: 38px;
  --shell-chrome-height: 90px;
  --page-gutter: 11px;
  --section-gap: 8px;
  --panel-pad: 10px;
  --control-height: 32px;
  font-size: 11.5px;
}

.layout.os-layout-v10.density-comfort {
  --sidebar: 232px;
  --topbar: 58px;
  --workspace-tabs-height: 44px;
  --shell-chrome-height: 102px;
  --page-gutter: 18px;
  --section-gap: 14px;
  --panel-pad: 14px;
  --control-height: 38px;
  font-size: 13px;
}

.layout.os-layout-v10 > .sidebar,
.layout.os-layout-v10 .topbar,
.layout.os-layout-v10 .workspace-chrome {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
}

.layout.os-layout-v10 .content {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 82%, transparent), transparent 280px),
    var(--bg);
}

.layout.os-layout-v10 :is(
  .panel,
  .table-shell,
  .command-panel,
  .metric-group-card,
  .dashboss-card,
  .dashboss-section,
  .task-card-premium,
  .calendar-side-card,
  .settings-window
) {
  border-color: var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: var(--shadow-soft);
}

.layout.os-layout-v10 :is(
  .btn,
  .action-button,
  .workspace-tab,
  .nav-item,
  .nav-group-toggle,
  .module-shortcut,
  .dashboss-tile,
  .dashboss-next-step,
  .task-card-premium
):hover {
  transform: none;
}

.layout.os-layout-v10 :is(.btn, .action-button):not(.btn-primary) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.layout.os-layout-v10 :is(.btn, .action-button):not(.btn-primary):hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.layout.os-layout-v10 :is(
  button,
  a,
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]
):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 76%, white);
  outline-offset: 2px;
}

.layout.os-layout-v10 :is(
  th,
  .badge,
  .status-pill,
  .module-tag,
  .eyebrow,
  .current-time-chip strong,
  .dashboss-tile > strong,
  .dashboss-gauge span,
  .task-kpi strong,
  .metric-value,
  .stat-value
) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.layout.os-layout-v10 th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.layout.os-layout-v10 :is(.badge, .status-pill, .module-tag, .eyebrow) {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.layout.os-layout-v10 .page-header {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.layout.os-layout-v10 .page-header p,
.layout.os-layout-v10 .panel-header p {
  color: var(--muted);
}

html[data-theme="dark"] .layout.os-layout-v10 :is(
  .panel,
  .table-shell,
  .command-panel,
  .metric-group-card,
  .dashboss-card,
  .dashboss-section,
  .task-card-premium,
  .calendar-side-card,
  .settings-window,
  .page-header
) {
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 900px) {
  .layout.os-layout-v10,
  .layout.os-layout-v10.density-compact,
  .layout.os-layout-v10.density-comfort {
    --topbar: 60px;
    --workspace-tabs-height: 42px;
    --shell-chrome-height: 102px;
    --page-gutter: 12px;
    --control-height: 44px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout.os-layout-v10 *,
  .layout.os-layout-v10 *::before,
  .layout.os-layout-v10 *::after {
    scroll-behavior: auto;
  }
}