/* Custex shared design tokens — themes are color tokens only (layout uses editor.css). */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --serif: 'Instrument Serif', 'Fraunces', Georgia, serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  --node-w: 248px;
  --header-h: 40px;
  --port-size: 11px;
  --port-first-offset: 56px;
  --port-stride: 24px;
}

/* ── V1 ATELIER ──────────────────────────────────── */
[data-theme="atelier"] {
  --bg-1: #f4efe6;
  --bg-2: #ece4d4;
  --paper: #faf6ed;
  --ink: #3a2f26;
  --ink-2: #5c5148;
  --warm: #8a7d68;
  --line: #d8cfb9;
  --line-strong: #b8a988;
  /* sRGB from Pantone FHI Cotton TCX swatches (screen = sRGB, not print spot) */
  --accent: #944a20;     /* 18-1246 TCX Umber — sRGB 148,74,32 */
  --accent-2: #7d946d;   /* 16-0224 TCX Green Eyes — sRGB 125,148,109 */
  --accent-rgb: 148, 74, 32;
  --accent-2-rgb: 125, 148, 109;
  --accent-3: #d9a441;   /* ochre */
  --port-in: #944a20;
  --port-out: #7d946d;
  --port-fab: #8b5a8c;
  --port-yarn: #d9a441;
  /* port dot + wire hue = node family (match header accents) */
  --port-color-product: var(--accent);
  --port-color-craft: var(--accent-2);
  --port-color-fabric: var(--port-fab);
  --port-color-yarn: var(--port-yarn);
  --port-color-motif: var(--accent-3);
  --port-color-matte: #5a7a9e;
  --port-color-colorSplit: #8b5a8c;
  --port-color-layout: #3f5fa8;
  --port-color-render: #0d9488;
  --canvas-bg: #f4efe6;
  --canvas-grid: rgba(148, 74, 32, 0.14);
  --node-bg: #fbf7ed;
  --node-shadow: 0 6px 22px rgba(60,42,18,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
  --selected-ring: rgba(148, 74, 32, 0.62);
}

/* ── V2 PIGMENT — alternate palette (same layout as Atelier) ─ */
[data-theme="pigment"] {
  --bg-1: #fbe6cf;
  --bg-2: #f9d3a8;
  --paper: #fff7e8;
  --ink: #3d2f24;
  --ink-2: #6a5040;
  --warm: #9a7c52;
  --line: #e8c89a;
  --line-strong: #c89a5a;
  --accent: #e94824;
  --accent-2: #2658b8;
  --accent-rgb: 233, 72, 36;
  --accent-2-rgb: 38, 88, 184;
  --accent-3: #e8b020;
  --port-in: #e94824;
  --port-out: #2658b8;
  --port-fab: #b53fa6;
  --port-yarn: #e8b020;
  --port-color-product: var(--accent);
  --port-color-craft: var(--accent-2);
  --port-color-fabric: var(--port-fab);
  --port-color-yarn: var(--port-yarn);
  --port-color-motif: var(--accent-3);
  --port-color-matte: #4a7c8c;
  --port-color-colorSplit: #7a4a8c;
  --port-color-layout: #2a8a6a;
  --port-color-render: #c026d3;
  --canvas-bg: #fbe6cf;
  --canvas-grid: rgba(232,72,36,0.10);
  --node-bg: #fff7e8;
  --node-shadow: 0 6px 22px rgba(61,47,36,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
  --selected-ring: rgba(233,72,36,0.45);
}

/* density */
[data-density="compact"] { --pad-1: 8px; --pad-2: 10px; --pad-3: 14px; --gap-1: 4px; --gap-2: 6px; --fs-body: 11px; }
[data-density="comfy"]   { --pad-1: 14px; --pad-2: 18px; --pad-3: 24px; --gap-1: 8px; --gap-2: 12px; --fs-body: 13px; }
[data-density],
:root { --pad-1: 10px; --pad-2: 14px; --pad-3: 18px; --gap-1: 6px; --gap-2: 8px; --fs-body: 12px; }
[data-density="compact"] { --pad-1: 8px; --pad-2: 10px; --pad-3: 14px; --gap-1: 4px; --gap-2: 6px; --fs-body: 11px; }
[data-density="comfy"]   { --pad-1: 14px; --pad-2: 18px; --pad-3: 24px; --gap-1: 8px; --gap-2: 12px; --fs-body: 13px; }