/* ══════════════════════════════════════════════════════════════════════════
   paragraph — design tokens.

   THESIS: this is a drafting machine, not a website. Two ideas carry the look.

   1. THE PEN CAROUSEL. Accent colours are not decoration — each one is a pen.
      Layer 1 is cyan, layer 2 magenta, layer 3 acid, layer 4 orange, layer 5
      violet. The same five colours mark layers in the drawing, rows in the
      tree, and tabs in the inspector. A colour in this UI always answers the
      question "which pen draws this?".

   2. CROP MARKS, NOT BOXES. Panels are bounded by registration ticks at their
      corners the way a plate is marked for trimming — never by a full border.
      Hairlines are 1px and cold; the drawing is the only warm thing on screen.

   Type is a pair: condensed grotesque caps for structure, mono for every
   number. Numbers are tabular and carry their unit in a dimmer weight,
   because in this tool a number without a unit is a bug.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ink: cold blueprint dark, never neutral black ── */
  --ink-000: #04070c;   /* app void */
  --ink-050: #070b12;   /* stage backdrop */
  --ink-100: #0a0f18;   /* panel */
  --ink-200: #0e141f;   /* panel raised */
  --ink-300: #131b28;   /* field */
  --ink-400: #18222f;   /* field hover */
  --ink-500: #1e2a3a;   /* pressed */

  /* ── hairlines ── */
  --line:      #16202d;
  --line-soft: #101822;
  --line-hi:   #253547;
  --line-hot:  #33475e;

  /* ── text ── */
  --txt:       #d4dde8;
  --txt-mid:   #93a3b8;
  --txt-dim:   #64748c;
  --txt-faint: #3e4b60;

  /* ── the pen carousel ── */
  --pen-1: #12e5f5;   /* cyan     — selection, primary action, layer 1 */
  --pen-2: #ff2d78;   /* magenta  — subtract, error, layer 2 */
  --pen-3: #c8f51e;   /* acid     — live/committed, layer 3 */
  --pen-4: #ff7a29;   /* orange   — warp/modifier, warning, layer 4 */
  --pen-5: #8b7bff;   /* violet   — raymarch, layer 5 */
  --pen-6: #ffffff;   /* white    — layer 6 */

  --pen-1-dim: #0b7d88;
  --pen-2-dim: #8f2049;
  --pen-3-dim: #6d861a;
  --pen-4-dim: #8f461c;
  --pen-5-dim: #4e4590;

  /* semantic aliases — always route through these, never the raw pen */
  --accent:   var(--pen-1);
  --danger:   var(--pen-2);
  --ok:       var(--pen-3);
  --warn:     var(--pen-4);
  --exotic:   var(--pen-5);

  /* ── the drawing ── */
  --paper:      #efeae0;
  --paper-edge: #cfc6b6;
  --plot-ink:   #14171c;

  /* ── type ──
     Condensed grotesque for structure (real condensed on macOS via
     Helvetica Neue; Arial Narrow / Roboto Condensed elsewhere).
     Mono for every value, id, coordinate and unit. */
  --f-display: 'Helvetica Neue', 'HelveticaNeue-CondensedBold', 'Arial Narrow',
               'Roboto Condensed', 'Archivo Narrow', system-ui, sans-serif;
  --f-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
            'JetBrains Mono', 'IBM Plex Mono', Consolas, monospace;

  --fs-micro: 9px;
  --fs-label: 10px;
  --fs-ui:    11px;
  --fs-val:   11.5px;
  --fs-code:  12.5px;
  --fs-head:  13px;
  --fs-big:   18px;

  --ls-label: 0.14em;
  --ls-head:  0.06em;

  /* ── metrics: everything snaps to 4px, panels to 28px header rows ── */
  --u:  4px;
  --u2: 8px;
  --u3: 12px;
  --u4: 16px;
  --row: 22px;      /* one parameter row */
  --hdr: 26px;      /* one panel header */
  --bar: 34px;      /* top bar / status bar */
  --tick: 7px;      /* crop-mark arm length */

  --r-none: 0;
  --r-sm: 1px;      /* this tool does not do rounded corners. 1px is the limit. */

  --z-overlay: 40;
  --z-float:   60;
  --z-modal:   90;

  --dur: 90ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink-000);
  color: var(--txt);
  font-family: var(--f-mono);
  font-size: var(--fs-ui);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { background: none; border: 0; }
::selection { background: var(--pen-1); color: var(--ink-000); }

/* ── scrollbars: hairline, no thumb chrome ── */
* { scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-hi); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-hot); background-clip: content-box; }

/* ══ typographic primitives ══ */

/* Structural caps. Used for panel titles, section rules, tab labels. */
.t-label {
  font-family: var(--f-display);
  font-size: var(--fs-label);
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--txt-dim);
}
.t-head {
  font-family: var(--f-display);
  font-size: var(--fs-head);
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--txt);
}
/* Every number in the app. Tabular, so columns of values line up. */
.t-val {
  font-family: var(--f-mono);
  font-size: var(--fs-val);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  color: var(--txt);
}
.t-unit { color: var(--txt-faint); font-size: var(--fs-micro); margin-left: 2px; }
.t-dim { color: var(--txt-dim); }
.t-faint { color: var(--txt-faint); }

/* ══ crop marks — the panel device ══
   Applied to any container that needs to read as a bounded plate. */
.crop { position: relative; }
.crop::before, .crop::after {
  content: ''; position: absolute; width: var(--tick); height: var(--tick);
  pointer-events: none; opacity: 0.85;
}
.crop::before {
  top: 0; left: 0;
  border-top: 1px solid var(--line-hi); border-left: 1px solid var(--line-hi);
}
.crop::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--line-hi); border-right: 1px solid var(--line-hi);
}

/* ══ the signal strip — a pen-coloured edge that says "this is active" ══ */
.strip { position: relative; }
.strip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
}

/* ══ hairline rules ══ */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule-v { width: 1px; background: var(--line); align-self: stretch; }

/* A ruled section header: LABEL ─────────────── */
.sect {
  display: flex; align-items: center; gap: var(--u2);
  height: var(--hdr); padding: 0 var(--u2);
  border-bottom: 1px solid var(--line);
  background: var(--ink-100);
  user-select: none; flex: none;
}
.sect > .fill-rule { flex: 1; height: 1px; background: var(--line); }

/* ══ focus: never a glow, always a hard 1px pen-coloured frame ══ */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* ══ pen layer swatch classes — used in tree, layers panel and SVG export ══ */
.pen-1 { --accent: var(--pen-1); }
.pen-2 { --accent: var(--pen-2); }
.pen-3 { --accent: var(--pen-3); }
.pen-4 { --accent: var(--pen-4); }
.pen-5 { --accent: var(--pen-5); }
.pen-6 { --accent: var(--pen-6); }

/* ══ state ══ */
.is-hidden { display: none !important; }
.is-disabled { opacity: 0.35; pointer-events: none; }
.is-busy { cursor: progress; }

/* ══ motion: only what communicates state. Nothing ambient. ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* A single blink used by the live-render indicator. Nothing else animates on idle. */
@keyframes pg-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }