/*
 * Delta design tokens — the ONLY file in the system where raw colours live.
 *
 * Derived from the Figma "colors" collection (Dark · Light modes) and re-branded
 * for Delta Tech (#f1f036). Light mode is a token swap: `<html data-theme="light">`.
 * Components must reference these variables; `npm run lint:design` rejects raw
 * colours anywhere else.
 */

:root,
[data-theme='dark'] {
  color-scheme: dark;
  /* ── Brand — Delta Tech ──────────────────────────────────────────────
     --brand-identity (#f1f036) is the official Delta colour — marketing and
     print. The UI uses --brand, tuned per theme so the yellow never glares on
     dark surfaces and stays visible on light ones:
       dark  #e6dc45  (−16% luminance vs identity, ink text 13.5:1)
       light #f2d21c  (deeper gold, ink text 12.9:1, edge on fills)
     Text on brand is always --text-on-brand (ink), never white. Yellow fails as
     text/thin lines on light surfaces, so use --text-brand / --border-focus. */
  --brand-identity: #f1f036;
  --brand: #e6dc45;
  --brand-hover: #ede45f;
  --brand-pressed: #d4ca36;
  --brand-bg: #34321a;
  --brand-edge: transparent;
  --brand-avatar-bg: #4d4710;
  --text-on-brand: #0e0e0e;

  /* ── Neutral ramp — inverted between modes */
  --neutral-black: #010101;
  --neutral-white: #ffffff;
  --neutral-gray-50: #121212;
  --neutral-gray-100: #171717;
  --neutral-gray-200: #212121;
  --neutral-gray-300: #2e2e2e;
  --neutral-gray-400: #595959;
  --neutral-gray-500: #787878;
  --neutral-gray-600: #999999;
  --neutral-gray-700: #bdbdbd;
  --neutral-gray-800: #dedede;
  --neutral-gray-900: #ededed;
  --neutral-muted-bg: #1d1d1d;

  /* ── Surface ladder, canvas outwards: bg-primary (page) → bg-secondary (cards) → card (panels) → card-elevated (controls, menus) → highlight (hairline) */
  --surface-bg-primary: #0e0e0e;
  --surface-bg-secondary: #121212;
  --surface-card: #171717;
  --surface-card-elevated: #212121;
  --surface-overlay: rgb(255 255 255 / 0.10);
  --surface-highlight: #363636;

  /* ── Borders */
  --border-default: #2e2e2e;
  --border-strong: #404040;
  --border-focus: var(--brand);

  /* ── Text */
  --text-primary: #ffffff;
  --text-secondary: #999999;
  --text-tertiary: #949494;
  --text-disabled: #7a7a7a;
  --text-on-dark: #ffffff;
  --text-brand: var(--brand);

  /* ── Status — every accent ships with a solid, pre-blended -bg partner. NEVER fake a tint with opacity. */
  --status-success: #2ecc70;
  --status-success-text: var(--status-success);
  --status-warning: #e5a633;
  --status-warning-text: var(--status-warning);
  --status-error: #f25959;
  --status-error-text: var(--status-error);
  --status-info: #38b4fa;
  --status-info-text: var(--status-info);
  --status-success-bg: #163021;
  --status-warning-bg: #342a17;
  --status-error-bg: #361d1d;
  --status-info-bg: #182c37;

  /* ── Categorical accents (originally Nodeflow node types). Reused for avatars, tags, chart series, entity types. Always pair X with X-bg. */
  --node-trigger: #38b4fa;
  --node-trigger-text: var(--node-trigger);
  --node-agent: #a78bfa;
  --node-agent-text: var(--node-agent);
  --node-action: #34d399;
  --node-action-text: var(--node-action);
  --node-condition: #fbbf24;
  --node-condition-text: var(--node-condition);
  --node-output: #fb7185;
  --node-output-text: var(--node-output);
  --node-cream: #fff1e2;
  --node-image: #e879f9;
  --node-image-text: var(--node-image);
  --node-video: #818cf8;
  --node-video-text: var(--node-video);
  --node-agent-build: #2dd4bf;
  --node-agent-build-text: var(--node-agent-build);
  --node-data: #a3e635;
  --node-data-text: var(--node-data);
  --node-code: #22d3ee;
  --node-code-text: var(--node-code);
  --node-webhook: #38b4fa;
  --node-webhook-text: var(--node-webhook);
  --node-schedule: #22d3ee;
  --node-schedule-text: var(--node-schedule);
  --node-approval: #fbbf24;
  --node-approval-text: var(--node-approval);
  --node-loop: #a78bfa;
  --node-loop-text: var(--node-loop);
  --node-merge: #34d399;
  --node-merge-text: var(--node-merge);
  --node-delay: #94a3b8;
  --node-delay-text: var(--node-delay);
  --node-transform: #f472b6;
  --node-transform-text: var(--node-transform);
  --node-audio: #fb923c;
  --node-audio-text: var(--node-audio);
  --node-classifier: #a3e635;
  --node-classifier-text: var(--node-classifier);
  --node-subflow: #818cf8;
  --node-subflow-text: var(--node-subflow);
  --node-error: #fb7185;
  --node-error-text: var(--node-error);
  --node-trigger-bg: #182c37;
  --node-agent-bg: #2a2537;
  --node-action-bg: #173127;
  --node-condition-bg: #372e15;
  --node-output-bg: #372124;
  --node-cream-bg: #383633;
  --node-image-bg: #342237;
  --node-video-bg: #242537;
  --node-agent-build-bg: #16312e;
  --node-data-bg: #293417;
  --node-code-bg: #143135;
  --node-webhook-bg: #182c37;
  --node-schedule-bg: #143135;
  --node-approval-bg: #372e15;
  --node-loop-bg: #2a2537;
  --node-merge-bg: #173127;
  --node-delay-bg: #27292c;
  --node-transform-bg: #36212c;
  --node-audio-bg: #372619;
  --node-classifier-bg: #293417;
  --node-subflow-bg: #242537;
  --node-error-bg: #372124;

  /* ── Mesh Aurora palettes (hero/auth surfaces only) */
  --aurora-base: #0a0a0a;
  --aurora-scrim: #0a0a0a;
  --aurora-core: #ffffff;
  --aurora-cool-hot: #d9f2ff;
  --aurora-cool-a: #218cfa;
  --aurora-cool-b: #4f59f2;
  --aurora-cool-c: #33388c;
  --aurora-violet-hot: #ebd9ff;
  --aurora-violet-a: #a873fa;
  --aurora-violet-b: #d966f2;
  --aurora-violet-c: #524099;
  --aurora-warm-hot: #ffedcc;
  --aurora-warm-a: #fa9e33;
  --aurora-warm-b: #d94026;
  --aurora-warm-c: #731f1a;
  --aurora-aurora-hot: #ccfff2;
  --aurora-aurora-a: #2ed4bf;
  --aurora-aurora-b: #3373e5;
  --aurora-aurora-c: #734dbf;
  --aurora-emerald-hot: #e5ffd9;
  --aurora-emerald-a: #66e559;
  --aurora-emerald-b: #33d48c;
  --aurora-emerald-c: #26594d;

  /* ── Effects ─────────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px -2px rgb(0 0 0 / 0.22), 0 1px 2px rgb(0 0 0 / 0.12);
  --shadow-node: 0 4px 104px rgb(0 0 0 / 0.15);
  --shadow-elevated: 0 10px 30px rgb(0 0 0 / 0.5), 0 4px 104px rgb(0 0 0 / 0.15);
  --glow-select: 0 0 0 1px rgb(230 220 69 / 0.5), 0 0 16px rgb(230 220 69 / 0.16);
  --focus-ring: 0 0 0 2px var(--surface-bg-primary), 0 0 0 4px var(--border-focus);
  --glass-bg: rgb(23 23 23 / 0.72);
  --glass-blur: 20px;
  --scrim: rgb(0 0 0 / 0.56);
  --hairline: var(--surface-highlight);

  /* ── Data visualisation — categorical series, in order of use ────── */
  --chart-1: var(--brand);
  --chart-2: var(--node-trigger);
  --chart-3: var(--node-agent);
  --chart-4: var(--node-action);
  --chart-5: var(--node-output);
  --chart-6: var(--node-code);
  --chart-7: var(--node-audio);
  --chart-8: var(--node-image);
  --chart-grid: var(--border-default);
  --chart-axis: var(--text-tertiary);
}

[data-theme='light'] {
  color-scheme: light;
  --brand-identity: #f1f036;
  --brand: #f2d21c;
  --brand-hover: #e8c710;
  --brand-pressed: #dcbc0c;
  --brand-bg: #fff0ba;
  --brand-edge: #c9a90a;
  --brand-avatar-bg: #715500;
  --text-on-brand: #0e0e0e;

  --neutral-black: #010101;
  --neutral-white: #ffffff;
  --neutral-gray-50: #f5f5f5;
  --neutral-gray-100: #ededed;
  --neutral-gray-200: #dedede;
  --neutral-gray-300: #bdbdbd;
  --neutral-gray-400: #999999;
  --neutral-gray-500: #787878;
  --neutral-gray-600: #595959;
  --neutral-gray-700: #383838;
  --neutral-gray-800: #1f1f1f;
  --neutral-gray-900: #121212;
  --neutral-muted-bg: #ededed;

  --surface-bg-primary: #f3f4f6;
  --surface-bg-secondary: #fafbfc;
  --surface-card: #ffffff;
  --surface-card-elevated: #eef0f3;
  --surface-overlay: rgb(0 0 0 / 0.10);
  --surface-highlight: #e4e7ec;

  --border-default: #dedede;
  --border-strong: #bdbdbd;
  --border-focus: #8f6300;

  --text-primary: #010101;
  --text-secondary: #595959;
  --text-tertiary: #6b6b6b;
  --text-disabled: #858585;
  --text-on-dark: #ffffff;
  --text-brand: #8f6300;

  --status-success: #00a14d;
  --status-success-text: #00813d;
  --status-warning: #ce7600;
  --status-warning-text: #a25c00;
  --status-error: #ff4542;
  --status-error-text: #dd001d;
  --status-info: #0094d6;
  --status-info-text: #0075ab;
  --status-success-bg: #d6ffde;
  --status-warning-bg: #ffefe2;
  --status-error-bg: #ffeeec;
  --status-info-bg: #e7f5ff;

  --node-trigger: #0090ec;
  --node-trigger-text: #0071bc;
  --node-agent: #9175ff;
  --node-agent-text: #7c44ff;
  --node-action: #009f6f;
  --node-action-text: #007f58;
  --node-condition: #ce7600;
  --node-condition-text: #a25c00;
  --node-output: #ff4167;
  --node-output-text: #da0049;
  --node-cream: #ffffff;
  --node-image: #e82aff;
  --node-image-text: #bc00d1;
  --node-video: #767fff;
  --node-video-text: #5a53ff;
  --node-agent-build: #009d90;
  --node-agent-build-text: #007c72;
  --node-data: #5f9c00;
  --node-data-text: #4a7b00;
  --node-code: #0098bc;
  --node-code-text: #007895;
  --node-webhook: #0090ec;
  --node-webhook-text: #0071bc;
  --node-schedule: #0098bc;
  --node-schedule-text: #007895;
  --node-approval: #ce7600;
  --node-approval-text: #a25c00;
  --node-loop: #9175ff;
  --node-loop-text: #7c44ff;
  --node-merge: #009f6f;
  --node-merge-text: #007f58;
  --node-delay: #758db0;
  --node-delay-text: #5b6f8b;
  --node-transform: #ff388d;
  --node-transform-text: #d5006f;
  --node-audio: #f35900;
  --node-audio-text: #bf4400;
  --node-classifier: #5f9c00;
  --node-classifier-text: #4a7b00;
  --node-subflow: #767fff;
  --node-subflow-text: #5a53ff;
  --node-error: #ff4542;
  --node-error-text: #dd001d;
  --node-trigger-bg: #e9f4ff;
  --node-agent-bg: #f2f1ff;
  --node-action-bg: #d2ffe8;
  --node-condition-bg: #ffefe2;
  --node-output-bg: #ffeeee;
  --node-cream-bg: #f5f1ed;
  --node-image-bg: #fdecff;
  --node-video-bg: #eff2ff;
  --node-agent-build-bg: #cbfff7;
  --node-data-bg: #e4fcd2;
  --node-code-bg: #e1f7ff;
  --node-webhook-bg: #e9f4ff;
  --node-schedule-bg: #e1f7ff;
  --node-approval-bg: #ffefe2;
  --node-loop-bg: #f2f1ff;
  --node-merge-bg: #d2ffe8;
  --node-delay-bg: #ebf3ff;
  --node-transform-bg: #ffedf2;
  --node-audio-bg: #ffeee8;
  --node-classifier-bg: #e4fcd2;
  --node-subflow-bg: #eff2ff;
  --node-error-bg: #ffeeec;

  --aurora-base: #fafafa;
  --aurora-scrim: #fafafa;
  --aurora-core: #ffffff;
  --aurora-cool-hot: #bfe0ff;
  --aurora-cool-a: #1a73eb;
  --aurora-cool-b: #4752e0;
  --aurora-cool-c: #738cf2;
  --aurora-violet-hot: #e0ccff;
  --aurora-violet-a: #9461eb;
  --aurora-violet-b: #c757e0;
  --aurora-violet-c: #9e85f2;
  --aurora-warm-hot: #ffe5b8;
  --aurora-warm-a: #f28c26;
  --aurora-warm-b: #cc381f;
  --aurora-warm-c: #f29e66;
  --aurora-aurora-hot: #b2f2e5;
  --aurora-aurora-a: #24b8a8;
  --aurora-aurora-b: #2966d6;
  --aurora-aurora-c: #8c9eeb;
  --aurora-emerald-hot: #d1f5c7;
  --aurora-emerald-a: #57d14d;
  --aurora-emerald-b: #29bd7a;
  --aurora-emerald-c: #80cc9e;

  --shadow-sm: 0 2px 8px -2px rgb(16 24 40 / 0.10), 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow-node: 0 4px 48px rgb(16 24 40 / 0.08);
  --shadow-elevated: 0 10px 30px rgb(16 24 40 / 0.12), 0 4px 64px rgb(16 24 40 / 0.08);
  --glow-select: 0 0 0 1px #c9a90a, 0 0 16px rgb(201 169 10 / 0.22);
  --focus-ring: 0 0 0 2px var(--surface-bg-primary), 0 0 0 4px var(--border-focus);
  --glass-bg: rgb(255 255 255 / 0.72);
  --glass-blur: 20px;
  --scrim: rgb(16 24 40 / 0.32);
  --hairline: var(--surface-highlight);

  --chart-1: #c37f00;
  --chart-2: var(--node-trigger);
  --chart-3: var(--node-agent);
  --chart-4: var(--node-action);
  --chart-5: var(--node-output);
  --chart-6: var(--node-code);
  --chart-7: var(--node-audio);
  --chart-8: var(--node-image);
  --chart-grid: var(--border-default);
  --chart-axis: var(--text-tertiary);
}

/* Hue aliases — general-purpose names for the categorical accents, so
   products outside workflow tooling don't talk about "node" colours.
   Declared on every themed root (not just :root) so they re-resolve inside
   nested theme regions, e.g. a light panel inside a dark page. */
:root,
[data-theme] {
  --accent-sky: var(--node-trigger);
  --accent-sky-text: var(--node-trigger-text);
  --accent-sky-bg: var(--node-trigger-bg);
  --accent-violet: var(--node-agent);
  --accent-violet-text: var(--node-agent-text);
  --accent-violet-bg: var(--node-agent-bg);
  --accent-emerald: var(--node-action);
  --accent-emerald-text: var(--node-action-text);
  --accent-emerald-bg: var(--node-action-bg);
  --accent-amber: var(--node-condition);
  --accent-amber-text: var(--node-condition-text);
  --accent-amber-bg: var(--node-condition-bg);
  --accent-rose: var(--node-output);
  --accent-rose-text: var(--node-output-text);
  --accent-rose-bg: var(--node-output-bg);
  --accent-fuchsia: var(--node-image);
  --accent-fuchsia-text: var(--node-image-text);
  --accent-fuchsia-bg: var(--node-image-bg);
  --accent-indigo: var(--node-video);
  --accent-indigo-text: var(--node-video-text);
  --accent-indigo-bg: var(--node-video-bg);
  --accent-teal: var(--node-agent-build);
  --accent-teal-text: var(--node-agent-build-text);
  --accent-teal-bg: var(--node-agent-build-bg);
  --accent-lime: var(--node-data);
  --accent-lime-text: var(--node-data-text);
  --accent-lime-bg: var(--node-data-bg);
  --accent-cyan: var(--node-code);
  --accent-cyan-text: var(--node-code-text);
  --accent-cyan-bg: var(--node-code-bg);
  --accent-orange: var(--node-audio);
  --accent-orange-text: var(--node-audio-text);
  --accent-orange-bg: var(--node-audio-bg);
  --accent-pink: var(--node-transform);
  --accent-pink-text: var(--node-transform-text);
  --accent-pink-bg: var(--node-transform-bg);
  --accent-slate: var(--node-delay);
  --accent-slate-text: var(--node-delay-text);
  --accent-slate-bg: var(--node-delay-bg);
}

/* Theme-independent scales */
:root {
  /* Spacing — 15 steps, from the Figma Spacing collection */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Radius — 9 steps */
  --radius-none: 0px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 29px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Layering */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-drawer: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-popover: 700;
  --z-toast: 800;
  --z-tooltip: 900;

  /* Layout */
  --layout-rail-w: 248px;
  --layout-rail-collapsed-w: 72px;
  --layout-topbar-h: 64px;
  --layout-content-max: 1200px;
  --layout-gutter: 24px;
  --control-h-sm: 30px;
  --control-h-md: 38px;
  --control-h-lg: 46px;
}