/*
 * BPMN Lineage semantic design tokens.
 *
 * This file is the single visual contract for the generated master dashboard
 * and the portable HTML export. Both generators inline it, so every artefact
 * remains offline-capable while using the same colour, spacing, typography,
 * elevation, control and motion decisions.
 */
:root {
  color-scheme: light;

  /* Raw palette */
  --raw-white: #ffffff;
  --raw-slate-25: #fcfcfd;
  --raw-slate-50: #f7f8fa;
  --raw-slate-100: #eef1f5;
  --raw-slate-200: #dde3ea;
  --raw-slate-300: #c8d0db;
  --raw-slate-500: #667085;
  --raw-slate-600: #475467;
  --raw-slate-700: #344054;
  --raw-slate-800: #1d2939;
  --raw-slate-900: #101828;
  --raw-navy-950: #061426;
  --raw-blue-50: #eff8ff;
  --raw-blue-100: #d9edff;
  --raw-blue-300: #84caff;
  --raw-blue-500: #2e90fa;
  --raw-blue-600: #0F62FE;
  --raw-blue-700: #175cd3;
  --raw-blue-800: #1849a9;
  --raw-blue-900: #194185;
  --raw-cyan-500: #21C7F6;
  --raw-green-50: #ecfdf3;
  --raw-green-600: #1FBF9F;
  --raw-amber-50: #fffaeb;
  --raw-amber-600: #F0A429;
  --raw-red-50: #fef3f2;
  --raw-red-600: #d92d20;
  --raw-violet-50: #f4f3ff;
  --raw-violet-600: #7A4CE0;

  /* Semantic colour */
  --surface-canvas: #f3f6fa;
  --surface-primary: var(--raw-white);
  --surface-secondary: var(--raw-slate-50);
  --surface-tertiary: var(--raw-slate-100);
  --surface-inverse: var(--raw-navy-950);
  --surface-selected: var(--raw-blue-50);
  --surface-hover: #f4f7fb;
  --surface-raised: #ffffff;
  --surface-sunken: #edf2f8;
  --surface-nav: var(--raw-navy-950);
  --surface-nav-elevated: #0d233d;
  --text-primary: var(--raw-slate-900);
  --text-secondary: var(--raw-slate-600);
  --text-muted: var(--raw-slate-500);
  --text-inverse: var(--raw-white);
  --border-subtle: #e6eaf0;
  --border-default: var(--raw-slate-200);
  --border-strong: var(--raw-slate-300);
  --action-primary: var(--raw-blue-600);
  --action-primary-hover: var(--raw-blue-700);
  --action-secondary: var(--raw-cyan-500);
  --action-primary-soft: #eaf3ff;
  --focus-ring: rgba(15, 98, 254, .28);
  --status-success: var(--raw-green-600);
  --status-warning: var(--raw-amber-600);
  --status-danger: var(--raw-red-600);
  --status-info: var(--raw-blue-600);

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

  /* Typography */
  --font-sans: Inter, Aptos, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-medium: 560;
  --weight-semibold: 650;
  --weight-bold: 740;

  /* Shape and elevation */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .07);
  --shadow-md: 0 14px 32px -14px rgba(16, 24, 40, .24);
  --shadow-lg: 0 28px 70px -24px rgba(7, 20, 38, .42);
  --shadow-panel: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -24px rgba(16, 24, 40, .28);
  --shadow-control: 0 1px 2px rgba(16, 24, 40, .06);

  /* Controls, layering and motion */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 400;
  --z-toast: 500;
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* Legacy aliases used by existing renderers */
  --bg: var(--surface-inverse);
  --bg2: #12233d;
  --panel: var(--surface-primary);
  --panel-alt: var(--surface-secondary);
  --border: var(--border-default);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --accent: var(--action-primary);
  --accent-soft: var(--surface-selected);
  --good: var(--status-success);
  --med: var(--status-warning);
  --bad: var(--status-danger);
  --shadow: var(--shadow-md);
}

:where(button, input, select, textarea, summary, [tabindex], a):focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}