/* DividenNote: primitives → semantic roles → component tokens. Scoped to this page. */
.dn-page {
  --dn-white: hsl(0 0% 100%);
  --dn-slate-25: hsl(210 30% 98%);
  --dn-slate-50: hsl(210 25% 96%);
  --dn-slate-100: hsl(210 22% 93%);
  --dn-slate-200: hsl(210 19% 87%);
  --dn-slate-500: hsl(210 15% 40%);
  --dn-slate-600: hsl(210 20% 32%);
  --dn-slate-800: hsl(214 33% 18%);
  --dn-slate-900: hsl(216 39% 13%);
  --dn-slate-950: hsl(216 40% 9%);
  --dn-teal-50: hsl(162 44% 95%);
  --dn-teal-300: hsl(166 58% 66%);
  --dn-teal-700: hsl(175 77% 26%);
  --dn-green-700: hsl(162 82% 24%);
  --dn-rose-50: hsl(347 70% 97%);
  --dn-rose-300: hsl(350 88% 79%);
  --dn-rose-700: hsl(350 65% 38%);
  --dn-amber-700: hsl(35 82% 32%);
  --dn-blue-700: hsl(215 70% 35%);
  --dn-purple-700: hsl(267 43% 40%);
  --dn-slate-75: hsl(210 30% 95%);
  --dn-slate-300: hsl(210 23% 74%);
  --dn-slate-400: hsl(210 12% 53%);
  --dn-slate-450: hsl(212 20% 48%);
  --dn-slate-700: hsl(213 24% 27%);
  --dn-slate-750: hsl(213 24% 23%);
  --dn-slate-850: hsl(215 31% 16%);
  --dn-teal-900: hsl(168 35% 17%);
  --dn-rose-950: hsl(345 29% 18%);
  --dn-amber-300: hsl(39 83% 71%);
  --dn-blue-300: hsl(213 90% 77%);
  --dn-purple-300: hsl(269 80% 82%);
  --dn-space-1: .25rem; --dn-space-2: .5rem; --dn-space-3: .75rem;
  --dn-space-4: 1rem; --dn-space-5: 1.25rem; --dn-space-6: 1.5rem;
  --dn-space-8: 2rem; --dn-space-10: 2.5rem;
  --dn-radius-sm: .625rem; --dn-radius-md: 1rem; --dn-radius-lg: 1.375rem;
  --dn-font-xs: .8125rem; --dn-font-sm: .875rem; --dn-font-base: 1rem;
  --dn-font-title: 1.25rem; --dn-font-value: 1.5rem;
  --dn-shadow-soft: 0 3px 14px hsl(216 39% 13% / .035);
  --dn-shadow-raised: 0 10px 26px hsl(216 39% 13% / .08);

  --dn-color-canvas: var(--dn-slate-50);
  --dn-color-surface: var(--dn-white);
  --dn-color-subtle: var(--dn-slate-25);
  --dn-color-border: var(--dn-slate-200);
  --dn-color-input-border: var(--dn-slate-400);
  --dn-color-text: var(--dn-slate-900);
  --dn-color-muted: var(--dn-slate-500);
  --dn-color-accent: var(--dn-teal-700);
  --dn-color-accent-soft: var(--dn-teal-50);
  --dn-color-action-text: var(--dn-white);
  --dn-color-positive: var(--dn-green-700);
  --dn-color-negative: var(--dn-rose-700);
  --dn-color-negative-soft: var(--dn-rose-50);
  --dn-color-warning: var(--dn-amber-700);
  --dn-color-info: var(--dn-blue-700);
  --dn-color-purple: var(--dn-purple-700);
  --dn-color-grid: var(--dn-slate-100);

  --dn-card-bg: var(--dn-color-surface);
  --dn-card-border: var(--dn-color-border);
  --dn-card-radius: var(--dn-radius-lg);
  --dn-card-padding: var(--dn-space-6);
  --dn-tab-active-bg: var(--dn-color-accent-soft);
  --dn-tab-active-text: var(--dn-color-accent);
  --dn-chart-received: var(--dn-color-accent);
  --dn-chart-expected: var(--dn-color-warning);
  --dn-button-bg: var(--dn-color-accent);
  --dn-button-text: var(--dn-color-action-text);
  --dn-focus: var(--dn-color-accent);
  --dn-sticky-top: 66px;
  color: var(--dn-color-text);
  background: var(--dn-color-canvas);
}
:root[data-theme="dark"] .dn-page {
  --dn-color-canvas: var(--dn-slate-950);
  --dn-color-surface: var(--dn-slate-900);
  --dn-color-subtle: var(--dn-slate-850);
  --dn-color-border: var(--dn-slate-700);
  --dn-color-input-border: var(--dn-slate-450);
  --dn-color-text: var(--dn-slate-75);
  --dn-color-muted: var(--dn-slate-300);
  --dn-color-accent: var(--dn-teal-300);
  --dn-color-accent-soft: var(--dn-teal-900);
  --dn-color-action-text: var(--dn-slate-950);
  --dn-color-positive: var(--dn-teal-300);
  --dn-color-negative: var(--dn-rose-300);
  --dn-color-negative-soft: var(--dn-rose-950);
  --dn-color-warning: var(--dn-amber-300);
  --dn-color-info: var(--dn-blue-300);
  --dn-color-purple: var(--dn-purple-300);
  --dn-color-grid: var(--dn-slate-750);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dn-page {
    --dn-color-canvas: var(--dn-slate-950);
    --dn-color-surface: var(--dn-slate-900);
    --dn-color-subtle: var(--dn-slate-850);
    --dn-color-border: var(--dn-slate-700);
    --dn-color-input-border: var(--dn-slate-450);
    --dn-color-text: var(--dn-slate-75);
    --dn-color-muted: var(--dn-slate-300);
    --dn-color-accent: var(--dn-teal-300);
    --dn-color-accent-soft: var(--dn-teal-900);
    --dn-color-action-text: var(--dn-slate-950);
    --dn-color-positive: var(--dn-teal-300);
    --dn-color-negative: var(--dn-rose-300);
    --dn-color-negative-soft: var(--dn-rose-950);
    --dn-color-warning: var(--dn-amber-300);
    --dn-color-info: var(--dn-blue-300);
    --dn-color-purple: var(--dn-purple-300);
    --dn-color-grid: var(--dn-slate-750);
  }
}