/* SSM Management — design tokens.
 * Layer 1: Cloudflare Kumo UI semantic bindings (OpenDesign curated integration, MIT, adapted from @cloudflare/kumo 2.9.2).
 * Layer 2: SSM Management system tokens, named by role. Components reference layer 2 only. */
@layer tokens, base, components, screens, utilities, print;

@layer tokens {
:root {
  /* ── Kumo canvas, component base, and recessed surface ── */
  --bg: oklch(98.75% 0 0);
  --surface: #ffffff;
  --surface-warm: oklch(96% 0 0);
  --fg: oklch(21% 0.006 285.885);
  --fg-2: var(--fg);
  --muted: oklch(55.6% 0 0);
  --meta: var(--muted);
  --border: oklch(14.5% 0 0 / 0.1);
  --border-soft: oklch(93.5% 0 0);
  --accent: oklch(0.5772 0.2324 260);
  --accent-on: #ffffff;
  --accent-hover: oklch(48.8% 0.243 264.376);
  --accent-active: var(--accent-hover);
  --success: oklch(59.6% 0.145 163.225);
  --warn: oklch(73.9% 0.177 58.2);
  --danger: oklch(63.7% 0.237 25.331);
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px;
  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px;
  --leading-body: 1.5; --leading-tight: 1.2; --tracking-display: 0;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --section-y-desktop: 64px; --section-y-tablet: 48px; --section-y-phone: 32px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 1px 2px 0 oklch(0% 0 0 / 0.08);
  --focus-ring: 0 0 0 2px oklch(15% 0 0);
  --motion-fast: 150ms; --motion-base: 250ms;
  --ease-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --container-max: 1200px;
  --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 12px;
}
@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } }

:root {
  /* ── Colour by role ── */
  --canvas: var(--bg);
  --recess: var(--surface-warm);
  --foreground: var(--fg);
  --foreground-muted: var(--muted);
  --border-strong: oklch(14.5% 0 0 / 0.28);
  --on-accent: var(--accent-on);
  --accent-soft: color-mix(in oklch, var(--accent) 9%, var(--surface));
  --link: var(--accent-hover);
  --focus: var(--focus-ring);

  /* tone scales — derived, never placed */
  --success-soft: color-mix(in oklch, var(--success) 12%, var(--surface));
  --success-ink: color-mix(in oklch, var(--success) 60%, var(--fg));
  --warn-soft: color-mix(in oklch, var(--warn) 18%, var(--surface));
  --warn-ink: color-mix(in oklch, var(--warn) 40%, var(--fg));
  --danger-soft: color-mix(in oklch, var(--danger) 11%, var(--surface));
  --danger-ink: color-mix(in oklch, var(--danger) 68%, var(--fg));

  /* ── Stage tokens: one ordered set (Kumo sequential palette), shared by menu, Dashboard, MO ── */
  --stage-materials: #E1EAF4; --stage-materials-on: var(--fg);
  --stage-ready: #8EBCF6;     --stage-ready-on: var(--fg);
  --stage-produce: #4290F0;   --stage-produce-on: var(--fg);
  --stage-qc: #0E58B4;        --stage-qc-on: #ffffff;
  --stage-complete: #03254F;  --stage-complete-on: #ffffff;
  --status-hold: var(--warn);     --status-hold-on: var(--fg);   --status-hold-soft: var(--warn-soft);
  --status-reject: var(--danger); --status-reject-on: #ffffff;   --status-reject-soft: var(--danger-soft);

  /* ── Status tokens (records and data freshness) ── */
  --status-draft: var(--foreground-muted);
  --status-pending: var(--warn);
  --status-approved: var(--success);
  --status-superseded: var(--border-strong);
  --status-stale: var(--warn);
  --status-manual: var(--foreground);
  --status-restricted: var(--foreground-muted);
  --status-restricted-fill: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--recess) 4px 8px);

  /* ── Spacing: one scale on a 4px base unit ── */
  --unit: 4px;
  --space-0: 0;
  --space-10: calc(var(--unit) * 10);
  --space-16: calc(var(--unit) * 16);
  --touch: calc(var(--unit) * 11); /* 44px minimum touch target */
  --control-h: calc(var(--unit) * 9); /* 36px */
  --control-h-sm: calc(var(--unit) * 7); /* 28px */
  --side-w: calc(var(--unit) * 62); /* 248px */

  /* ── Type scale: size / line-height / weight ── */
  --type-caption: 400 var(--text-xs)/16px var(--font-body);
  --type-label: 500 var(--text-sm)/18px var(--font-body);
  --type-body: 400 var(--text-base)/20px var(--font-body);
  --type-body-strong: 500 var(--text-base)/20px var(--font-body);
  --type-title: 600 var(--text-lg)/22px var(--font-display);
  --type-heading: 600 var(--text-xl)/26px var(--font-display);
  --type-section: 600 var(--text-2xl)/30px var(--font-display);
  --type-page: 600 var(--text-3xl)/36px var(--font-display);
  --type-figure: 600 var(--text-2xl)/28px var(--font-body);
  --numerals: tabular-nums lining-nums;

  /* ── Radii, elevation, motion ── */
  --radius-control: var(--radius-lg);
  --radius-card: var(--radius-lg);
  --radius-chip: var(--radius-md);
  --elev-card: var(--elev-ring), var(--elev-raised);
  --elev-overlay: var(--elev-ring), 0 16px 40px oklch(0% 0 0 / 0.18);
  --scrim: oklch(0% 0 0 / 0.32);
  --transition: var(--motion-fast) ease-out;

  /* ── Interaction states ── */
  --state-hover: var(--recess);
  --state-selected: var(--recess);
  --state-disabled-fg: var(--foreground-muted);
  --state-disabled-bg: var(--recess);

  /* ── Cost components: Kumo categorical chart palette, fixed order ── */
  --cost-materials: #4290F0; --cost-labour: #F5B647; --cost-overhead: #8D58EE; --cost-wastage: #E8649D;

  /* ── Print tokens: A4 mono laser ── */
  --print-ink: oklch(0% 0 0);
  --print-paper: oklch(100% 0 0);
  --print-margin: 12mm;
  --print-rule: 0.8pt;
  --print-rule-strong: 2pt;
  --print-fs-body: 13pt;
  --print-fs-label: 12pt;
  --print-fs-figure: 17pt;
  --print-fs-title: 22pt;
  --print-lh: 1.3;
  --print-writein-h: 13mm;
  --print-radius: 1.5mm;
}
}