/* =========================================================
   Cabinet design tokens
   Shared by authenticated header, sidebar, filters, drawers,
   widget cards, charts and work tables.
   Landing keeps its own accent system.
   ========================================================= */

:root {
  /* Canonical cabinet colours */
  --ks-color-canvas: #f7f8fb;
  --ks-color-surface: #ffffff;
  --ks-color-surface-subtle: #f9fafc;
  --ks-color-surface-muted: #eef1f5;
  --ks-color-text: #111827;
  --ks-color-text-strong: #303640;
  --ks-color-text-muted: #5b6472;
  --ks-color-text-faint: #98a0ad;
  --ks-color-border: #e5e8ef;
  --ks-color-border-subtle: #f1f3f6;
  --ks-color-border-strong: #d3dbea;
  --ks-color-brand: #1b2e6b;
  --ks-color-brand-strong: #101b3d;
  --ks-color-brand-soft: #e8eefc;
  --ks-color-action: #2b6bf3;
  --ks-color-action-hover: #1f56d0;
  --ks-color-on-action: #ffffff;
  --ks-color-focus: rgba(43, 107, 243, 0.28);
  --ks-color-positive: #12805c;
  --ks-color-positive-soft: #edf7f2;
  --ks-color-negative: #d93f4c;
  --ks-color-negative-soft: #fbefef;
  --ks-color-warning: #b26b00;
  --ks-color-warning-soft: #fbf4e6;

  /* Spacing */
  --ks-space-1: 4px;
  --ks-space-2: 8px;
  --ks-space-3: 12px;
  --ks-space-4: 16px;
  --ks-space-5: 20px;
  --ks-space-6: 24px;
  --ks-space-8: 32px;
  --ks-space-10: 40px;
  --ks-space-12: 48px;

  /* Shape and elevation */
  --ks-radius-compact: 8px;
  --ks-radius-control: 12px;
  --ks-radius-card: 16px;
  --ks-radius-drawer: 20px;
  --ks-radius-pill: 999px;
  --ks-shadow-menu: 0 16px 40px rgba(17, 19, 24, 0.12);
  --ks-shadow-workspace: 0 24px 64px rgba(17, 19, 24, 0.14);
  --ks-shadow-card-hover: 0 12px 32px rgba(17, 19, 24, 0.07);

  /* Typography */
  --ks-font-family-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks-font-size-caption: 0.75rem;
  --ks-font-size-body: 0.9375rem;
  --ks-font-size-card-title: 1rem;
  --ks-font-size-section-title: 1.25rem;
  --ks-font-size-page-title: clamp(1.5rem, 1.32rem + 0.45vw, 1.875rem);
  --ks-font-weight-regular: 400;
  --ks-font-weight-medium: 500;
  --ks-font-weight-semibold: 600;
  --ks-font-weight-bold: 700;
  --ks-line-height-tight: 1.2;
  --ks-line-height-body: 1.5;

  /* Controls, layout and motion */
  --ks-control-height-compact: 36px;
  --ks-control-height: 42px;
  --ks-control-height-large: 48px;
  --ks-layout-sidebar-width: 240px;
  --ks-layout-sidebar-collapsed-width: 56px;
  --ks-layout-topbar-height: 46px;
  --ks-layout-content-max: 1440px;
  --ks-layout-page-gutter: clamp(12px, 1.35vw, 24px);
  --ks-motion-fast: 140ms;
  --ks-motion-normal: 220ms;
  --ks-motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Chart roles */
  --ks-chart-series-1: #5b6ee1;
  --ks-chart-series-2: #7b61d9;
  --ks-chart-series-3: #4f9b8f;
  --ks-chart-series-4: #d28a45;
  --ks-chart-series-5: var(--ks-color-positive);
  --ks-chart-series-6: var(--ks-color-negative);
  --ks-chart-series-7: var(--ks-color-action);
  --ks-chart-series-8: var(--accent-cyan);
  --ks-chart-series-9: var(--accent-pink);
  --ks-chart-series-10: var(--ks-color-brand-strong);
  --ks-chart-previous: #98a0ad;
  --ks-chart-grid: #e9ecf2;
  --ks-chart-tooltip-bg: var(--ks-color-text-strong);
  --ks-chart-tooltip-text: var(--ks-color-surface);

  /* Temporary compatibility aliases; remove after consumer migration. */
  --purple: var(--ks-color-brand);
  --purple-deep: var(--ks-color-brand-strong);
  --purple-soft: var(--ks-color-brand-soft);
  --purple-bg: rgba(123, 97, 217, 0.08);
  --purple-bg-2: rgba(123, 97, 217, 0.14);
  --purple-glow: rgba(123, 97, 217, 0.16);
  --accent-blue: var(--ks-color-action);
  --accent-cyan: #74cdd0;
  --accent-pink: #f08ac9;
  --pos: var(--ks-color-positive);
  --pos-bg: var(--ks-color-positive-soft);
  --neg: var(--ks-color-negative);
  --neg-bg: var(--ks-color-negative-soft);
  --warn: var(--ks-color-warning);
  --warn-bg: var(--ks-color-warning-soft);
  --ink: var(--ks-color-text);
  --ink-2: var(--ks-color-text-strong);
  --muted: var(--ks-color-text-muted);
  --muted-2: var(--ks-color-text-faint);
  --muted-3: var(--ks-color-border-strong);
  --line: var(--ks-color-border);
  --line-2: var(--ks-color-border-subtle);
  --bg-app: var(--ks-color-canvas);
  --surface: var(--ks-color-surface);
  --surface-soft: var(--ks-color-surface-subtle);
  --surface-muted: var(--ks-color-surface-muted);
  --card-grad: var(--ks-color-surface);
  --card-border: 1px solid rgba(27, 32, 44, 0.08);
  --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --card-shadow-soft: 0 8px 26px rgba(27, 32, 44, 0.045);
  --card-shadow-hover: var(--ks-shadow-card-hover);
  --ks-ui-bg: var(--ks-color-canvas);
  --ks-ui-surface: var(--ks-color-surface);
  --ks-ui-surface-muted: var(--ks-color-surface-muted);
  --ks-ui-border: var(--ks-color-border);
  --ks-ui-border-strong: var(--ks-color-border-strong);
  --ks-ui-text: var(--ks-color-text);
  --ks-ui-muted: var(--ks-color-text-muted);
  --ks-ui-primary: var(--ks-color-action);
  --ks-ui-primary-soft: #eef1ff;
  --ks-ui-positive: var(--ks-color-positive);
  --ks-ui-positive-soft: var(--ks-color-positive-soft);
  --ks-ui-negative: var(--ks-color-negative);
  --ks-ui-negative-soft: var(--ks-color-negative-soft);
  --ks-ui-warning-soft: var(--ks-color-warning-soft);
  --ks-ui-radius: var(--ks-radius-card);
  --ks-ui-radius-sm: var(--ks-radius-control);
  --ks-ui-shadow: var(--ks-shadow-workspace);
  --ks-ui-shadow-sm: var(--ks-shadow-card-hover);
}

[data-bs-theme="dark"] {
  --ks-color-canvas: #1c2128;
  --ks-color-surface: #22272e;
  --ks-color-surface-subtle: #2d333b;
  --ks-color-surface-muted: #30363d;
  --ks-color-text: #f0f6fc;
  --ks-color-text-strong: #c9d1d9;
  --ks-color-text-muted: #8b949e;
  --ks-color-text-faint: #6e7681;
  --ks-color-border: #30363d;
  --ks-color-border-subtle: #2d333b;
  --ks-color-border-strong: #484f58;
  --purple-bg: rgba(141, 99, 255, 0.16);
  --purple-bg-2: rgba(141, 99, 255, 0.24);
  --purple-glow: rgba(141, 99, 255, 0.3);
  --card-grad: linear-gradient(135deg, rgba(34, 39, 46, 0.95) 0%, rgba(45, 51, 59, 0.85) 100%);
  --card-border: 0.5px solid rgba(255, 255, 255, 0.06);
  --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Cabinet body — bg only applies inside authenticated shell */
.app-shell--auth {
  background: var(--bg-app);
}

.app-shell--auth body,
.app-shell--auth #page-content-wrapper {
  font-feature-settings: "tnum", "ss01", "cv11";
  letter-spacing: -0.005em;
}

/* Tabular numbers everywhere inside cabinet */
.app-shell--auth .metric-value,
.app-shell--auth .metric-prev,
.app-shell--auth .metric-delta,
.app-shell--auth .f-sub,
.app-shell--auth .crown-chip .days {
  font-variant-numeric: tabular-nums;
}