/* ============================================================================
   NELD — colors_and_type.css
   Resolved design tokens (Source of Truth: tokens/*.json in neld-plan).
   Every {ref} resolved to a concrete value. Light values in :root,
   dark overrides in :root[data-theme="dark"]. Mirrors nozy globals.css 1:1.

   Colors are authored in oklch. data-type colors (--c-image/text/video/audio)
   and the flow selection violet are BRAND-LOCKED — do not change their hue.
   ============================================================================ */

/* Brand + UI typefaces. The marketing BI embeds these as woff2; here we load
   the matching Google Fonts families (flagged substitution — swap for the
   embedded woff2 if pixel-exact brand rendering is required). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Outfit:wght@300..700&family=Space+Grotesk:wght@400..700&family=JetBrains+Mono:wght@400..600&display=swap');

:root {
  /* --- Typeface roles ----------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif; /* marketing headlines */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* product UI + body */
  --font-grotesk: 'Space Grotesk', 'Outfit', system-ui, sans-serif;         /* labels / numerics */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;        /* code / tokens */

  /* --- Brand atoms (from BI: Persimmon on near-black) --------------------- */
  --brand-persimmon: #FF5A36;
  --brand-ink: #0B0D12;

  /* ========================================================
     COLOR — primitives, semantic, chart, data-type, atmosphere
     ======================================================== */

  /* primitives — 수식 생성: oklch(L[step], Cmax[hue]×envelope[step], H[hue]) */
  --red-50: oklch(0.97 0.022 27);
  --red-100: oklch(0.93 0.055 27);
  --red-200: oklch(0.87 0.098 27);
  --red-300: oklch(0.79 0.154 27);
  --red-400: oklch(0.70 0.197 27);
  --red-500: oklch(0.60 0.240 27);
  --red-600: oklch(0.50 0.240 27);
  --red-700: oklch(0.42 0.206 27);
  --red-800: oklch(0.33 0.163 27);
  --red-900: oklch(0.26 0.120 27);
  --red-950: oklch(0.18 0.086 27);
  --orange-50: oklch(0.97 0.016 55);
  --orange-100: oklch(0.93 0.041 55);
  --orange-200: oklch(0.87 0.074 55);
  --orange-300: oklch(0.79 0.115 55);
  --orange-400: oklch(0.70 0.148 55);
  --orange-500: oklch(0.60 0.180 55);
  --orange-600: oklch(0.50 0.180 55);
  --orange-700: oklch(0.42 0.155 55);
  --orange-800: oklch(0.33 0.122 55);
  --orange-900: oklch(0.26 0.090 55);
  --orange-950: oklch(0.18 0.065 55);
  --amber-50: oklch(0.97 0.016 75);
  --amber-100: oklch(0.93 0.041 75);
  --amber-200: oklch(0.87 0.074 75);
  --amber-300: oklch(0.79 0.115 75);
  --amber-400: oklch(0.70 0.148 75);
  --amber-500: oklch(0.60 0.180 75);
  --amber-600: oklch(0.50 0.180 75);
  --amber-700: oklch(0.42 0.155 75);
  --amber-800: oklch(0.33 0.122 75);
  --amber-900: oklch(0.26 0.090 75);
  --amber-950: oklch(0.18 0.065 75);
  --green-50: oklch(0.97 0.018 145);
  --green-100: oklch(0.93 0.046 145);
  --green-200: oklch(0.87 0.082 145);
  --green-300: oklch(0.79 0.128 145);
  --green-400: oklch(0.70 0.164 145);
  --green-500: oklch(0.60 0.200 145);
  --green-600: oklch(0.50 0.200 145);
  --green-700: oklch(0.42 0.172 145);
  --green-800: oklch(0.33 0.136 145);
  --green-900: oklch(0.26 0.100 145);
  --green-950: oklch(0.18 0.072 145);
  --blue-50: oklch(0.97 0.018 255);
  --blue-100: oklch(0.93 0.046 255);
  --blue-200: oklch(0.87 0.082 255);
  --blue-300: oklch(0.79 0.128 255);
  --blue-400: oklch(0.70 0.164 255);
  --blue-500: oklch(0.60 0.200 255);
  --blue-600: oklch(0.50 0.200 255);
  --blue-700: oklch(0.42 0.172 255);
  --blue-800: oklch(0.33 0.136 255);
  --blue-900: oklch(0.26 0.100 255);
  --blue-950: oklch(0.18 0.072 255);
  --violet-50: oklch(0.97 0.020 286);
  --violet-100: oklch(0.93 0.051 286);
  --violet-200: oklch(0.87 0.090 286);
  --violet-300: oklch(0.79 0.141 286);
  --violet-400: oklch(0.70 0.180 286);
  --violet-500: oklch(0.60 0.220 286);
  --violet-600: oklch(0.50 0.220 286);
  --violet-700: oklch(0.42 0.189 286);
  --violet-800: oklch(0.33 0.150 286);
  --violet-900: oklch(0.26 0.110 286);
  --violet-950: oklch(0.18 0.079 286);
  --purple-50: oklch(0.97 0.017 305);
  --purple-100: oklch(0.93 0.044 305);
  --purple-200: oklch(0.87 0.078 305);
  --purple-300: oklch(0.79 0.122 305);
  --purple-400: oklch(0.70 0.156 305);
  --purple-500: oklch(0.60 0.190 305);
  --purple-600: oklch(0.50 0.190 305);
  --purple-700: oklch(0.42 0.163 305);
  --purple-800: oklch(0.33 0.129 305);
  --purple-900: oklch(0.26 0.095 305);
  --purple-950: oklch(0.18 0.068 305);
  --magenta-50: oklch(0.97 0.020 330);
  --magenta-100: oklch(0.93 0.051 330);
  --magenta-200: oklch(0.87 0.090 330);
  --magenta-300: oklch(0.79 0.141 330);
  --magenta-400: oklch(0.70 0.180 330);
  --magenta-500: oklch(0.60 0.220 330);
  --magenta-600: oklch(0.50 0.220 330);
  --magenta-700: oklch(0.42 0.189 330);
  --magenta-800: oklch(0.33 0.150 330);
  --magenta-900: oklch(0.26 0.110 330);
  --magenta-950: oklch(0.18 0.079 330);
  --zinc-50: oklch(0.97 0 0);
  --zinc-100: oklch(0.93 0 0);
  --zinc-200: oklch(0.87 0 0);
  --zinc-300: oklch(0.78 0 0);
  --zinc-400: oklch(0.63 0 0);
  --zinc-500: oklch(0.50 0 0);
  --zinc-600: oklch(0.37 0 0);
  --zinc-700: oklch(0.27 0 0);
  --zinc-750: oklch(0.24 0 0);
  --zinc-800: oklch(0.20 0 0);
  --zinc-900: oklch(0.14 0 0);
  --zinc-950: oklch(0.10 0 0);
  --zinc-white: oklch(0.99 0 0);
  --slate-50: oklch(0.97 0.003 255);
  --slate-100: oklch(0.93 0.007 255);
  --slate-200: oklch(0.87 0.012 255);
  --slate-300: oklch(0.78 0.019 255);
  --slate-400: oklch(0.63 0.025 255);
  --slate-500: oklch(0.50 0.030 255);
  --slate-600: oklch(0.37 0.026 255);
  --slate-700: oklch(0.27 0.020 255);
  --slate-800: oklch(0.20 0.015 255);
  --slate-900: oklch(0.14 0.011 255);
  --slate-950: oklch(0.10 0.008 255);
  --black-a50: rgba(0, 0, 0, 0.5);
  --black-a60: rgba(0, 0, 0, 0.6);
  --black-a80: rgba(0, 0, 0, 0.8);
  --black-a85: rgba(0, 0, 0, 0.85);

  /* semantic — shadcn-style semantic tokens */
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.14 0 0);
  --card: oklch(0.99 0 0);
  --card-foreground: oklch(0.14 0 0);
  --popover: oklch(0.99 0 0);
  --popover-foreground: oklch(0.14 0 0);
  --surface: oklch(0.97 0 0);
  --surface-raised: oklch(0.93 0 0);
  --primary: oklch(0.55 0.21 255);
  --primary-foreground: oklch(0.99 0 0);
  --primary-strong: oklch(0.33 0.136 255);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.14 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.37 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.14 0 0);
  --border: oklch(0.93 0 0);
  --input: oklch(0.93 0 0);
  --ring: oklch(0.63 0 0);
  --overlay: rgba(0, 0, 0, 0.5);
  --overlay-heavy: rgba(0, 0, 0, 0.8);
  --positive-subtle: oklch(0.97 0.018 145);
  --positive-default: oklch(0.70 0.164 145);
  --positive-strong: oklch(0.42 0.172 145);
  --caution-subtle: oklch(0.97 0.016 75);
  --caution-default: oklch(0.70 0.148 75);
  --caution-strong: oklch(0.42 0.155 75);
  --critical-subtle: oklch(0.97 0.022 27);
  --critical-default: oklch(0.60 0.240 27);
  --critical-strong: oklch(0.42 0.206 27);
  --info-subtle: oklch(0.97 0.018 255);
  --info-default: oklch(0.60 0.200 255);
  --info-strong: oklch(0.50 0.200 255);
  --destructive: oklch(0.60 0.240 27);
  --destructive-strong: oklch(0.42 0.206 27);
  --c-selection: oklch(0.50 0.200 255);

  /* chart — Component tier — Recharts/d3 차트 전용 blue ramp 5색 */
  --chart-1: oklch(0.79 0.128 255);
  --chart-2: oklch(0.60 0.200 255);
  --chart-3: oklch(0.50 0.200 255);
  --chart-4: oklch(0.42 0.172 255);
  --chart-5: oklch(0.33 0.136 255);

  /* data-type — 데이터 식별 brand-lock 색 */
  --c-image: oklch(0.70 0.164 255);
  --c-text: oklch(0.70 0.164 145);
  --c-video: oklch(0.70 0.148 55);
  --c-audio: oklch(0.70 0.156 305);

  /* atmosphere — Component/effect tier — background depth layer (mesh · noise · grain) */
  --bg-atmosphere-mesh: radial-gradient(at 18% 24%, oklch(0.95 0.045 285 / 0.55) 0%, transparent 55%), radial-gradient(at 82% 18%, oklch(0.96 0.025 220 / 0.45) 0%, transparent 55%), radial-gradient(at 50% 86%, oklch(0.97 0.02 200 / 0.4) 0%, transparent 60%);
  --bg-atmosphere-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect x='0' y='0' width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bg-atmosphere-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect x='0' y='0' width='100%' height='100%' filter='url(%23g)'/></svg>");

  /* ========================================================
     TYPOGRAPHY — size + leading, weight, tracking
     ======================================================== */

  /* size — Font size + line-height 쌍 */
  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* leading — Line-height pair for each size — Tailwind v4 `--text-{name}--line-height` */
  --text-2xs-leading: 0.875rem;
  --text-xs-leading: 1rem;
  --text-sm-leading: 1rem;
  --text-base-leading: 1.25rem;
  --text-md-leading: 1.25rem;
  --text-lg-leading: 1.5rem;
  --text-xl-leading: 1.75rem;
  --text-2xl-leading: 2rem;

  /* weight */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* tracking — Letter-spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;

  /* ========================================================
     RADIUS · BORDER · SHADOW
     ======================================================== */

  /* radius — base 8px (= 0 */
  --radius: 0.5rem;
  --radius-xs: calc(var(--radius) * 0.25);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-2xl: calc(var(--radius) * 2);
  --radius-full: 9999px;

  /* border-width */
  --border-width-default: 1px;
  --border-width-thick: 1.5px;
  --border-width-heavy: 2px;

  /* shadow — 4-step elevation scale */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* shadow-semantic — 용도별 alias */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* ========================================================
     MOTION — duration, easing, semantic
     ======================================================== */

  /* duration — 6-step duration */
  --dur-instant: 50ms;
  --dur-fast: 100ms;
  --dur-normal: 150ms;
  --dur-content: 200ms;
  --dur-slow: 250ms;
  --dur-enter: 350ms;

  /* easing — Cubic-bezier curve set */
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-arrival: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glow-expand: cubic-bezier(0.33, 1, 0.68, 1);

  /* semantic — 용도별 duration alias */
  --motion-feedback: 100ms;
  --motion-content: 200ms;
  --motion-structure: 350ms;
  --motion-stagger-gap: 80ms;

  /* ========================================================
     FLOW EDITOR — node, port, wire, canvas, glow, clip, group, bar
     ======================================================== */

  /* node — Flow node 카드의 surface/border/shadow/padding */
  --flow-node-bg: rgba(255, 255, 255, 0.85);
  --flow-node-blur: 12px;
  --flow-node-border: #e5e7eb;
  --flow-node-border-hover: #d1d5db;
  --flow-node-border-width: 1px;
  --flow-node-radius: 12px;
  --flow-node-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --flow-node-shadow-drag: 0 8px 32px rgba(0, 0, 0, 0.15);
  --flow-node-padding-x: 2px;
  --flow-node-padding-y: 2px;
  --flow-node-min-width: 180px;
  --flow-node-surface: rgba(0, 0, 0, 0.03);
  --flow-node-surface-border: rgba(0, 0, 0, 0.06);
  --flow-node-surface-active: rgba(0, 0, 0, 0.06);
  --flow-node-surface-radius: 8px;
  --flow-node-text-primary: #1a1a1a;
  --flow-node-text-secondary: #666;
  --flow-node-text-placeholder: rgba(0, 0, 0, 0.3);
  --flow-node-text-muted: rgba(0, 0, 0, 0.55);
  --flow-node-text-label: rgba(0, 0, 0, 0.5);
  --flow-node-text-subtle: rgba(0, 0, 0, 0.3);
  --flow-node-text-size: 13px;
  --flow-node-label-weight: 600;
  --flow-node-scroll-thumb: rgba(0, 0, 0, 0.35);
  --flow-node-scroll-thumb-hover: rgba(0, 0, 0, 0.5);

  /* node-title — S4 Fused Header — 카드 위 예약 공간 */
  --flow-node-title-slot-h: 22px;
  --flow-node-title-slot-mb: 6px;
  --flow-node-title-dot-size: 6px;
  --flow-node-title-opacity-idle: 0.55;
  --flow-node-title-opacity-active: 1;
  --flow-node-title-weight-idle: 500;
  --flow-node-title-weight-active: 600;
  --flow-node-title-edit-bg: rgba(0, 0, 0, 0.06);
  --flow-node-title-dot-default: rgba(0, 0, 0, 0.55);

  /* wired — 포트가 연결되어 있을 때 표시되는 라벨/배경 */
  --flow-node-wired-bg: rgba(34, 197, 94, 0.1);
  --flow-node-wired-text: #166534;

  /* node-state — 노드 라이프사이클 상태 5종 — empty / running / completed / dirty / error */
  --flow-state-empty-color: rgba(0, 0, 0, 0.06);
  --flow-state-running-color: #3b82f6;
  --flow-state-completed-color: #22c55e;
  --flow-state-dirty-color: #eab308;
  --flow-state-error-color: #ef4444;
  --flow-state-error-text: #b91c1c;
  --flow-state-error-bg: rgba(239, 68, 68, 0.08);
  --flow-state-glow-spread: 12px;
  --flow-state-glow-opacity: 0.3;
  --flow-state-running-glow: 0 0 12px rgba(59, 130, 246, 0.3);
  --flow-state-completed-glow: 0 0 12px rgba(34, 197, 94, 0.3);
  --flow-state-dirty-glow: 0 0 12px rgba(234, 179, 8, 0.3);
  --flow-state-error-glow: 0 0 12px rgba(239, 68, 68, 0.3);
  --flow-state-border-width: 1.5px;

  /* selection */
  --flow-selected-color: oklch(0.5346 0.2189 285.75);
  --flow-selected-width: 2px;

  /* card — NodeCard 내부 carousel/preview 컨테이너 */
  --flow-card-border: rgba(0, 0, 0, 0.1);
  --flow-card-bg: rgba(255, 255, 255, 0.7);

  /* imggen — ImageGenNode 의 generating overlay + prompt input 톤 */
  --flow-imggen-overlay: rgba(230, 230, 230, 0.5);
  --flow-imggen-generating-from: rgba(128, 128, 128, 0.5);
  --flow-imggen-generating-mid: rgba(230, 230, 230, 0.5);
  --flow-imggen-prompt-text: #666;
  --flow-imggen-prompt-mode-text: #f0f0f5;
  --flow-imggen-focus-overlay: rgba(0, 0, 0, 0.5);

  /* pill */
  --flow-pill-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --flow-pill-hover: rgba(0, 0, 0, 0.05);
  --flow-pill-border: rgba(0, 0, 0, 0.15);

  /* retry */
  --flow-retry-border: #ddd;

  /* glow — ExecutionGlow — flow 고유 violet + magenta accent (#518) — brand --primary(blue) 와 무관 */
  --flow-glow-color-a: oklch(0.60 0.220 286);
  --flow-glow-color-b: oklch(0.60 0.220 330);
  --flow-glow-color-soft-15: oklch(0.59 0.22 286 / 0.125);
  --flow-glow-color-soft-30: oklch(0.59 0.22 286 / 0.375);
  --flow-glow-color-soft-50: oklch(0.59 0.22 286 / 0.5);
  --flow-glow-color-soft-65: oklch(0.59 0.22 286 / 0.19);

  /* clip — VideoCombinerNode timeline + SequenceClipCard chroma layer */
  --flow-clip-color-1: oklch(0.66 0.16 286);
  --flow-clip-color-2: oklch(0.7 0.14 220);
  --flow-clip-color-3: oklch(0.66 0.16 330);
  --flow-clip-color-4: oklch(0.72 0.16 155);
  --flow-clip-color-5: oklch(0.78 0.16 80);
  --flow-clip-color-6: oklch(0.66 0.2 27);
  --flow-clip-color-7: oklch(0.6 0.18 300);
  --flow-clip-color-8: oklch(0.72 0.14 240);
  --flow-clip-chroma-sky: oklch(0.7 0.14 220 / 0.7);
  --flow-clip-chroma-violet: oklch(0.66 0.16 286 / 0.7);
  --flow-clip-chroma-amber: oklch(0.78 0.16 80 / 0.7);
  --flow-clip-chroma-emerald: oklch(0.72 0.16 155 / 0.7);
  --flow-clip-chroma-rose: oklch(0.66 0.2 27 / 0.7);
  --flow-clip-chroma-cyan: oklch(0.72 0.14 200 / 0.7);
  --flow-clip-speed-badge-bg: oklch(0.78 0.16 80 / 0.85);

  /* meta */
  --flow-meta-bg: rgba(0, 0, 0, 0.6);
  --flow-meta-text: #fff;

  /* group — Group Node 5 색 alpha 변형 */
  --flow-group-blue: rgba(161, 189, 255, 0.5);
  --flow-group-pink: rgba(255, 161, 161, 0.5);
  --flow-group-green: rgba(161, 255, 189, 0.5);
  --flow-group-yellow: rgba(255, 235, 161, 0.5);
  --flow-group-gray: rgba(200, 200, 200, 0.5);

  /* canvas —  */
  --flow-canvas-bg: oklch(0.93 0 0);
  --flow-canvas-dot: rgba(0, 0, 0, 0.06);
  --flow-canvas-dot-size: 1px;
  --flow-canvas-dot-gap: 20px;

  /* port — 노드 포트 —  */
  --flow-port-size: 28px;
  --flow-port-border-width: 2px;
  --flow-port-bg: #ffffff;
  --flow-port-glow-spread: 8px;
  --flow-port-glow-spread-hover: 12px;
  --flow-port-offset: 18px;
  --flow-port-vertical-start: 36px;
  --flow-port-vertical-gap: 36px;
  --flow-port-icon-size: 16px;
  --flow-port-image: #4a90f2;
  --flow-port-text: #22c55e;
  --flow-port-video: #f59e0b;
  --flow-port-default: #94a3b8;
  --flow-port-incompatible: #6b7280;
  --flow-port-incompatible-opacity: 0.3;
  --flow-port-color-mix: 70%;
  --flow-port-icon-mix: 58%;
  --flow-port-badge-text: #ffffff;

  /* wire */
  --flow-wire-width: 1.5px;
  --flow-wire-width-hover: 3px;
  --flow-wire-color-mix: 58%;
  --flow-wire-glow-blur: 4px;
  --flow-wire-glow-opacity: 0.4;
  --flow-wire-scissors-bg: rgba(30, 30, 30, 0.9);
  --flow-wire-scissors-border: 1px;

  /* floating — Controls + Minimap floating panel ( */
  --flow-floating-bg: rgba(255, 255, 255, 0.08);
  --flow-floating-blur: 12px;
  --flow-floating-border: rgba(255, 255, 255, 0.1);
  --flow-floating-radius: 8px;
  --flow-floating-btn-radius: 4px;
  --flow-floating-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --flow-floating-text: #a0a0a8;
  --flow-floating-text-hover: #e0e0e6;

  /* bar — Node FloatingBar — :root scope (Radix Portal cascade 가능) */
  --flow-bar-radius: 12px;
  --flow-bar-btn-radius: 8px;
  --flow-bar-bg: oklch(0.99 0 0);
  --flow-bar-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --flow-bar-text: oklch(0.37 0 0);
  --flow-bar-text-hover: oklch(0.14 0 0);
  --flow-bar-separator: oklch(0.93 0 0);
  --flow-bar-primary-bg: oklch(0.55 0.21 255);
  --flow-bar-primary-text: oklch(0.99 0 0);
  --flow-bar-primary-hover: color-mix(in oklab, var(--primary) 85%, var(--foreground));
  --flow-bar-destructive: oklch(0.60 0.240 27);
  --flow-bar-destructive-hover: color-mix(in oklab, var(--destructive) 85%, var(--foreground));
  --flow-bar-menu-bg: oklch(0.99 0 0);
  --flow-bar-menu-border: oklch(0.93 0 0);
  --flow-bar-menu-text: oklch(0.14 0 0);
  --flow-bar-menu-text-secondary: oklch(0.37 0 0);
  --flow-bar-menu-hover: oklch(0.97 0 0);
  --flow-bar-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

  /* bar-glass — FloatingBar Fused Header — bar + title 가 공유하는 glass surface */
  --flow-bar-glass-bg: rgba(245, 245, 248, 0.85);
  --flow-bar-glass-border: rgba(0, 0, 0, 0.08);
  --flow-bar-glass-radius: 10px;
  --flow-bar-glass-shadow: 0 4px 18px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* node-primary — 노드 우측 하단 primary 버튼 — ambient violet→magenta gradient + active glow */
  --node-primary-gradient-from: oklch(0.70 0.180 286);
  --node-primary-gradient-via: oklch(0.60 0.220 286);
  --node-primary-gradient-to: oklch(0.70 0.180 330);
  --node-primary-flow-duration: 6000ms;
  --node-primary-flow-duration-active: 2400ms;
  --node-primary-glow-duration: 2800ms;
  --node-primary-twinkle-duration: 1800ms;
  --node-primary-glow-stop-1: oklch(0.59 0.22 286);
  --node-primary-glow-stop-2: oklch(0.66 0.2 330);
  --node-primary-glow-stop-3: oklch(0.69 0.18 285);
  --node-primary-glow-stop-4: oklch(0.7 0.18 320);

  /* marquee — 캔버스 marquee 선택 박스 — Brand/Primary blue tone (GSTUDIO-66) */
  --flow-marquee-fill: rgba(74, 144, 242, 0.1);
  --flow-marquee-border: #4a90f2;

  /* ========================================================
     SEMANTIC TYPE LAYER  (composed from the size/weight scale)
     ======================================================== */
  --type-display:  600 var(--text-2xl)/var(--text-2xl-leading) var(--font-display);
  --type-title:    600 var(--text-xl)/var(--text-xl-leading) var(--font-display);
  --type-heading:  600 var(--text-lg)/var(--text-lg-leading) var(--font-sans);
  --type-subhead:  500 var(--text-md)/var(--text-md-leading) var(--font-sans);
  --type-body:     400 var(--text-base)/var(--text-base-leading) var(--font-sans);
  --type-body-sm:  400 var(--text-sm)/var(--text-sm-leading) var(--font-sans);
  --type-label:    500 var(--text-sm)/var(--text-sm-leading) var(--font-grotesk);
  --type-caption:  400 var(--text-xs)/var(--text-xs-leading) var(--font-sans);
  --type-mono:     400 var(--text-sm)/var(--text-sm-leading) var(--font-mono);
}

:root[data-theme="dark"] {

  /* colors · semantic */
  --background: oklch(0.14 0 0);
  --foreground: oklch(0.97 0 0);
  --card: oklch(0.14 0 0);
  --card-foreground: oklch(0.97 0 0);
  --popover: oklch(0.14 0 0);
  --popover-foreground: oklch(0.97 0 0);
  --surface: oklch(0.20 0 0);
  --surface-raised: oklch(0.24 0 0);
  --primary: oklch(0.74 0.165 255);
  --primary-foreground: oklch(0.14 0 0);
  --primary-strong: oklch(0.79 0.128 255);
  --secondary: oklch(0.20 0 0);
  --secondary-foreground: oklch(0.97 0 0);
  --muted: oklch(0.20 0 0);
  --muted-foreground: oklch(0.63 0 0);
  --accent: oklch(0.20 0 0);
  --accent-foreground: oklch(0.97 0 0);
  --border: oklch(0.27 0 0);
  --input: oklch(0.27 0 0);
  --ring: oklch(0.50 0 0);
  --overlay: rgba(0, 0, 0, 0.6);
  --overlay-heavy: rgba(0, 0, 0, 0.85);
  --positive-subtle: oklch(0.26 0.100 145);
  --positive-default: oklch(0.79 0.128 145);
  --positive-strong: oklch(0.87 0.082 145);
  --caution-subtle: oklch(0.26 0.090 75);
  --caution-default: oklch(0.79 0.115 75);
  --caution-strong: oklch(0.87 0.074 75);
  --critical-subtle: oklch(0.26 0.120 27);
  --critical-default: oklch(0.70 0.197 27);
  --critical-strong: oklch(0.79 0.154 27);
  --info-subtle: oklch(0.26 0.100 255);
  --info-default: oklch(0.70 0.164 255);
  --info-strong: oklch(0.79 0.128 255);
  --destructive: oklch(0.60 0.240 27);
  --destructive-strong: oklch(0.42 0.206 27);
  --c-selection: oklch(0.70 0.164 255);

  /* colors · atmosphere */
  --bg-atmosphere-mesh: radial-gradient(at 18% 24%, oklch(0.32 0.1 285 / 0.55) 0%, transparent 55%), radial-gradient(at 82% 18%, oklch(0.28 0.08 220 / 0.45) 0%, transparent 55%), radial-gradient(at 50% 86%, oklch(0.22 0.05 200 / 0.4) 0%, transparent 60%);
  --bg-atmosphere-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect x='0' y='0' width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bg-atmosphere-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.10 0'/></filter><rect x='0' y='0' width='100%' height='100%' filter='url(%23g)'/></svg>");

  /* radius-shadow · shadow */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);

  /* flow · node */
  --flow-node-bg: rgba(255, 255, 255, 0.06);
  --flow-node-border: rgba(255, 255, 255, 0.12);
  --flow-node-border-hover: rgba(255, 255, 255, 0.18);
  --flow-node-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --flow-node-shadow-drag: 0 8px 32px rgba(0, 0, 0, 0.55);
  --flow-node-surface: rgba(255, 255, 255, 0.04);
  --flow-node-surface-border: rgba(255, 255, 255, 0.06);
  --flow-node-surface-active: rgba(255, 255, 255, 0.12);
  --flow-node-text-primary: #e0e0e6;
  --flow-node-text-secondary: #888;
  --flow-node-text-placeholder: rgba(255, 255, 255, 0.25);
  --flow-node-text-muted: rgba(255, 255, 255, 0.65);
  --flow-node-text-label: rgba(255, 255, 255, 0.5);
  --flow-node-text-subtle: rgba(255, 255, 255, 0.3);
  --flow-node-scroll-thumb: rgba(255, 255, 255, 0.32);
  --flow-node-scroll-thumb-hover: rgba(255, 255, 255, 0.48);

  /* flow · node-title */
  --flow-node-title-edit-bg: rgba(255, 255, 255, 0.06);

  /* flow · wired */
  --flow-node-wired-text: #22c55e;

  /* flow · node-state */
  --flow-state-empty-color: rgba(255, 255, 255, 0.1);
  --flow-state-error-text: #f87171;
  --flow-state-error-bg: rgba(239, 68, 68, 0.15);
  --flow-state-running-glow: 0 0 12px rgba(59, 130, 246, 0.4);
  --flow-state-completed-glow: 0 0 12px rgba(34, 197, 94, 0.4);
  --flow-state-dirty-glow: 0 0 12px rgba(234, 179, 8, 0.4);
  --flow-state-error-glow: 0 0 12px rgba(239, 68, 68, 0.4);

  /* flow · card */
  --flow-card-border: rgba(255, 255, 255, 0.2);
  --flow-card-bg: rgba(255, 255, 255, 0.1);

  /* flow · imggen */
  --flow-imggen-overlay: rgba(30, 30, 30, 0.6);
  --flow-imggen-generating-from: rgba(60, 60, 60, 0.6);
  --flow-imggen-generating-mid: rgba(90, 90, 90, 0.5);
  --flow-imggen-prompt-text: #ddd;
  --flow-imggen-focus-overlay: rgba(0, 0, 0, 0.6);

  /* flow · pill */
  --flow-pill-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --flow-pill-hover: rgba(255, 255, 255, 0.08);
  --flow-pill-border: rgba(255, 255, 255, 0.3);

  /* flow · retry */
  --flow-retry-border: rgba(255, 255, 255, 0.15);

  /* flow · glow */
  --flow-glow-color-a: oklch(0.70 0.180 286);
  --flow-glow-color-b: oklch(0.70 0.180 330);
  --flow-glow-color-soft-15: oklch(0.69 0.18 286 / 0.18);
  --flow-glow-color-soft-30: oklch(0.69 0.18 286 / 0.45);
  --flow-glow-color-soft-50: oklch(0.69 0.18 286 / 0.6);
  --flow-glow-color-soft-65: oklch(0.69 0.18 286 / 0.25);

  /* flow · clip */
  --flow-clip-color-1: oklch(0.72 0.18 286);
  --flow-clip-color-2: oklch(0.74 0.16 220);
  --flow-clip-color-3: oklch(0.72 0.18 330);
  --flow-clip-color-4: oklch(0.76 0.18 155);
  --flow-clip-color-5: oklch(0.82 0.16 80);
  --flow-clip-color-6: oklch(0.72 0.2 27);
  --flow-clip-color-7: oklch(0.66 0.2 300);
  --flow-clip-color-8: oklch(0.76 0.14 240);
  --flow-clip-chroma-sky: oklch(0.7 0.14 220 / 0.62);
  --flow-clip-chroma-violet: oklch(0.66 0.16 286 / 0.62);
  --flow-clip-chroma-amber: oklch(0.78 0.16 80 / 0.62);
  --flow-clip-chroma-emerald: oklch(0.72 0.16 155 / 0.62);
  --flow-clip-chroma-rose: oklch(0.66 0.2 27 / 0.62);
  --flow-clip-chroma-cyan: oklch(0.72 0.14 200 / 0.62);

  /* flow · meta */
  --flow-meta-bg: rgba(0, 0, 0, 0.7);

  /* flow · group */
  --flow-group-blue: rgba(161, 189, 255, 0.35);
  --flow-group-pink: rgba(255, 161, 161, 0.35);
  --flow-group-green: rgba(161, 255, 189, 0.35);
  --flow-group-yellow: rgba(255, 235, 161, 0.35);
  --flow-group-gray: rgba(200, 200, 200, 0.25);

  /* flow · canvas */
  --flow-canvas-bg: #1c1c1c;
  --flow-canvas-dot: rgba(255, 255, 255, 0.04);

  /* flow · port */
  --flow-port-bg: #1e1e1e;

  /* flow · wire */
  --flow-wire-scissors-bg: rgba(50, 50, 50, 0.95);

  /* flow · bar-glass */
  --flow-bar-glass-bg: rgba(32, 32, 36, 0.85);
  --flow-bar-glass-border: rgba(255, 255, 255, 0.1);
  --flow-bar-glass-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   Semantic helper classes
   ============================================================================ */
.ds-display { font: var(--type-display); letter-spacing: var(--letter-spacing-tight); color: var(--foreground); text-wrap: balance; }
.ds-title   { font: var(--type-title);   letter-spacing: var(--letter-spacing-tight); color: var(--foreground); }
.ds-heading { font: var(--type-heading); color: var(--foreground); }
.ds-subhead { font: var(--type-subhead); color: var(--foreground); }
.ds-body    { font: var(--type-body);    color: var(--foreground); }
.ds-body-sm { font: var(--type-body-sm); color: var(--muted-foreground); }
.ds-label   { font: var(--type-label);   letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--muted-foreground); }
.ds-caption { font: var(--type-caption); color: var(--muted-foreground); }
.ds-code    { font: var(--type-mono);    color: var(--foreground); background: var(--surface); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }