/* ORKA Plan design tokens. See docs/ui-design-system.md.
   Define semantic roles here; component and screen styles consume them. */
:root {

  /* Brand */
  --nucleus-purple: #4e3a9d;
  --signal-purple: #7664ea;
  --agent-teal: #055147;
  --consensus-mint: #a4dcb5;
  --void-black: #141417;
  --cloud-white: #f6f5fd;
  --alert-red: #ff534c;

  /* Surfaces and readable text */
  --surface-shell: #141417;
  --surface-panel: #1a1a1e;
  --surface-raised: #212126;
  --surface-sunken: #101013;
  --surface-hover: #26262b;
  --surface-selected: rgb(118 100 234 / 14%);
  --text-primary: #f6f5fd;
  --text-secondary: #a0a0a8;
  --text-muted: #9999a3;
  --text-inverse: #141417;
  --text-accent: #9184f0;
  --text-meta: #A0A0A8;
  --border-hairline: rgb(246 245 253 / 10%);
  --border-strong: rgb(246 245 253 / 20%);
  --border-accent: var(--signal-purple);
  --accent: #705ddf;
  --accent-hover: #7461e7;
  --accent-press: #6858d6;
  --accent-wash: rgb(118 100 234 / 14%);
  --accent-quiet: #9184f0;
  --accent-soft: var(--accent-quiet);
  --accent-secondary: #76dff8;
  --on-accent: #fff;
  --state-running: var(--signal-purple);
  --state-active: var(--consensus-mint);
  --state-complete: var(--consensus-mint);
  --state-idle: #85858e;
  --state-error: var(--alert-red);
  --state-warning: #D9B35F;
  --focus-ring: var(--signal-purple);
  --surface-field: var(--surface-sunken);
  --surface-field-disabled: var(--surface-panel);
  --border-field: #75757f;
  --text-placeholder: var(--text-secondary);
  --scrim: color-mix(in srgb, var(--void-black) 64%, transparent);

  /* Typography */
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-mono);
  --font-ui: var(--font-sans);
  --font-data: var(--font-mono);
  --font-body: var(--font-ui);
  --fs-ui-xs: 11px;
  --fs-ui-sm: 12px;
  --fs-ui-md: 13px;
  --fs-ui-lg: 15px;
  --fs-ui-xl: 19px;
  --lh-ui: 1.45;
  --ls-display: -0.01em;
  --ls-ui: -0.005em;
  --ls-label: 0.06em;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Spacing, sizing and motion */
  --shadow-panel: var(--shadow-1);
  --shadow-float: var(--shadow-window);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-hairline: inset 0 0 0 1px var(--border-hairline);
  --shadow-tint: #000;
  --shadow-1: 0 1px 2px color-mix(in srgb,var(--shadow-tint) 27%,transparent),0 2px 8px -2px color-mix(in srgb,var(--shadow-tint) 17%,transparent);
  --shadow-2: 0 2px 6px -1px color-mix(in srgb,var(--shadow-tint) 26%,transparent),0 10px 28px -8px color-mix(in srgb,var(--shadow-tint) 37%,transparent);
  --shadow-3: 0 4px 10px -2px color-mix(in srgb,var(--shadow-tint) 29%,transparent),0 28px 64px -18px color-mix(in srgb,var(--shadow-tint) 51%,transparent);
  --shadow-window: 0 40px 90px -30px rgb(0 0 0 / 65%);
  --shell-rail-surface: var(--surface-panel);
  --shell-workspace-surface: var(--surface-raised);
  --shell-rail-shadow: var(--shadow-hairline), var(--shadow-1);
  --shell-workspace-shadow: var(--shadow-hairline), var(--shadow-2);
  --shell-grain-opacity: .018;
  --shell-grain-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --label-research: #e7c574;
  --label-security: #ee9d8f;
  --label-bug: #e79dc9;
  --label-design: #a89fd7;
  --label-backend: #78b4e4;
  --label-performance: #9fdcd7;
  --label-frontend: #a4dcb5;
  --opacity-disabled: 0.44;
  --layer-under: -1;
  --layer-base: 0;
  --layer-raised: 1;
  --layer-sticky: 10;
  --layer-rail: 20;
  --layer-nav: 30;
  --layer-dropdown: 400;
  --layer-scrim: 700;
  --layer-drawer: 800;
  --layer-modal: 900;
  --layer-toast: 1000;
  --layer-skip-link: 1100;
  --space-7: 48px;
  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 40px;
  --header-height: 48px;
  --content-max: 1480px;

  /* Compatibility aliases for existing layout styles. New components use roles above. */
  --s-1: var(--space-1);
  --s-2: var(--space-2);
  --s-3: var(--space-3);
  --s-4: var(--space-4);
  --s-5: var(--space-5);
  --s-6: var(--space-6);
  --s-7: var(--space-7);
  --r-1: var(--radius-sm);
  --r-2: var(--radius-md);
  --r-3: var(--radius-lg);
  --h-1: var(--control-sm);
  --h-2: var(--control-md);
  --h-3: var(--control-lg);
  --h-head: var(--header-height);
  --t-1: var(--fs-ui-xs);
  --t-2: var(--fs-ui-sm);
  --t-3: var(--fs-ui-md);
  --t-4: var(--fs-ui-lg);
  --t-5: var(--fs-ui-xl);
  --t-6: 28px;
  --measure: var(--content-max);
  --panel-bg: var(--surface-panel);
  color-scheme: dark;
  --void: var(--surface-shell);
  --deep: var(--surface-sunken);
  --panel: var(--surface-panel);
  --raised: var(--surface-raised);
  --line: var(--border-hairline);
  --strong: var(--border-strong);
  --white: var(--text-primary);
  --muted: var(--text-secondary);
  --faint: var(--text-muted);
  --purple: var(--accent);
  --soft: var(--accent-quiet);
  --mint: var(--state-complete);
  --amber: var(--state-warning);
  --red: var(--state-error);
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  line-height: var(--lh-ui);
  background: var(--surface-shell);
  color: var(--text-primary);
  --cyan: var(--accent-secondary);
  --pink: var(--accent-quiet);
  --glow-purple: none;
  --danger: var(--state-error);
  --success: var(--state-complete);
  --text: var(--text-primary);
  --violet: var(--accent);
  font-weight: var(--fw-regular);
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-shell: #f3f2f7;
  --surface-panel: #fff;
  --surface-raised: #fff;
  --surface-sunken: #f6f5fd;
  --surface-hover: #f1f0f8;
  --surface-selected: rgb(78 58 157 / 8%);
  --text-primary: #141417;
  --text-secondary: #575757;
  --text-muted: #686872;
  --text-inverse: #fff;
  --text-accent: var(--nucleus-purple);
  --text-meta: #575757;
  --border-hairline: rgb(20 20 23 / 10%);
  --border-strong: rgb(20 20 23 / 18%);
  --border-accent: var(--nucleus-purple);
  --accent: var(--nucleus-purple);
  --accent-hover: #5c46b8;
  --accent-press: #40307f;
  --accent-wash: rgb(78 58 157 / 8%);
  --accent-quiet: var(--nucleus-purple);
  --accent-secondary: #0e6d86;
  --state-running: var(--nucleus-purple);
  --state-active: var(--agent-teal);
  --state-complete: var(--agent-teal);
  --state-idle: #787880;
  --state-error: #c02a24;
  --state-warning: #815500;
  --focus-ring: var(--nucleus-purple);
  --shadow-tint: #292631;
  --shadow-1: 0 0 0 1px rgb(20 20 23 / 5%),0 1px 3px rgb(41 38 49 / 8%),0 5px 14px -8px rgb(41 38 49 / 18%);
  --shadow-2: 0 0 0 1px rgb(20 20 23 / 7%),0 3px 8px -2px rgb(41 38 49 / 12%),0 14px 32px -12px rgb(41 38 49 / 24%);
  --shadow-3: 0 0 0 1px rgb(20 20 23 / 8%),0 8px 22px -8px rgb(41 38 49 / 18%),0 32px 70px -24px rgb(41 38 49 / 30%);
  --shell-rail-surface: color-mix(in srgb,var(--surface-raised) 76%,var(--surface-shell));
  --shell-rail-shadow: var(--shadow-1);
  --shell-workspace-shadow: var(--shadow-2);
  --shell-grain-opacity: .014;
  --surface-field: var(--surface-panel);
  --surface-field-disabled: var(--surface-sunken);
  --border-field: #939399;
  --label-research: #8a5f00;
  --label-security: #a8402a;
  --label-bug: #a63a78;
  --label-design: #4e3a9d;
  --label-backend: #17578f;
  --label-performance: #055147;
  --label-frontend: #1f6b3c;
}