/* Cyboflow design tokens
   Paper-toned "professional terminal" aesthetic — warm cream surfaces,
   hairline borders, a single rust accent, JetBrains Mono throughout.

   The font is loaded via a <link rel="preconnect"> + stylesheet in
   index.html (not an @import here) so it doesn't block first paint. */

:root {
  /* ─── Paper / ink palette ─────────────────────────────────── */
  --cf-page:        #f5f1e8; /* page bg */
  --cf-surface:     #ebe4d2; /* rails, header chrome */
  --cf-surface-dim: #e1d8c0; /* gradient bottom */
  --cf-surface-mut: #efeadc; /* muted (pending step) */
  --cf-card:        #ffffff;
  --cf-line:        #d8cfb8; /* primary hairline */
  --cf-line-soft:   #e6dec7;

  --cf-ink:    #1a1815; /* foreground */
  --cf-ink-2:  #6a5e44; /* body */
  --cf-ink-3:  #9c8e6c; /* muted */
  --cf-ink-4:  #b3a685; /* very muted */

  /* ─── Accents ─────────────────────────────────────────────── */
  --cf-rust:   #c96442; /* PRIMARY accent — running, brand */
  --cf-green:  #2d8a5b; /* done, additions */
  --cf-gold:   #d4a72c; /* waiting, edits */
  --cf-amber:  #a86b1d; /* human-in-the-loop borders */
  --cf-amber-stripe-1: #d99a3d;
  --cf-amber-stripe-2: #c98a2d;

  /* Phase colors (workflow visualization) */
  --cf-phase-plan:     #3b6dd6;
  --cf-phase-refine:   #5a4ad6;
  --cf-phase-execute:  #c96442;
  --cf-phase-verify:   #2d8a5b;
  --cf-phase-review:   #a87a2c;
  --cf-phase-compound: #8b5cf6;
  --cf-phase-prune:    #8a4a4a;

  /* ─── Type ────────────────────────────────────────────────── */
  --cf-font: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --cf-font-system: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;

  /* Size ramp (px) */
  --cf-size-micro:    8.5px; /* uppercase chips (OPTIONAL) */
  --cf-size-eyebrow:  9px;   /* phase head labels */
  --cf-size-meta:     10px;  /* secondary meta, button labels */
  --cf-size-label:    10.5px;
  --cf-size-body:     11px;
  --cf-size-body-1:   11.5px; /* primary body */
  --cf-size-card:     12px;
  --cf-size-card-1:   13px;
  --cf-size-h3:       14px;
  --cf-size-h2:       20px;
  --cf-size-h1:       22px;

  /* Tracking */
  --cf-track-tight:   -0.01em;
  --cf-track-tight-1: -0.005em;
  --cf-track-eyebrow: 0.14em;
  --cf-track-eyebrow-wide: 0.18em;
  --cf-track-btn:     0.12em;

  /* ─── Spacing / sizing ────────────────────────────────────── */
  --cf-titlebar-h: 38px;
  --cf-pane-h:     34px;
  --cf-rail-l:     208px;
  --cf-rail-r:     296px;

  --cf-step-w:        138px;  /* active workflow card */
  --cf-step-w-edit:   178px;  /* blueprint editor card */
  --cf-step-col-gap:  14px;
  --cf-step-row-h:    86px;

  /* Borders — most surfaces are SQUARE (0 radius) */
  --cf-radius:    0;
  --cf-radius-sm: 3px;  /* search inputs, small buttons */
  --cf-radius-md: 5px;  /* rail tabs */
  --cf-radius-pill: 9px; /* review count badge */

  --cf-border:     1px solid var(--cf-line);
  --cf-border-card: 1.4px solid var(--cf-ink); /* step cards */
  --cf-outline-run: 2px solid var(--cf-rust);  /* outline-offset: 2px */

  /* ─── Shadows (rare; reserved for hover/elevation) ────────── */
  --cf-shadow-card-hover: 0 2px 0 var(--cf-ink);          /* picker rows on hover */
  --cf-shadow-check:      0 2px 6px rgba(45,138,91,.35);  /* green check on done step */
  --cf-shadow-modal:      0 30px 80px rgba(0,0,0,.45);

  /* ─── Motion ──────────────────────────────────────────────── */
  --cf-ease: cubic-bezier(.2,0,.2,1);
  --cf-dur-fast: 120ms;
  --cf-dur-pulse: 1.4s;
}

/* Semantic helpers */
.cf-eyebrow {
  font-family: var(--cf-font);
  font-size: var(--cf-size-eyebrow);
  letter-spacing: var(--cf-track-eyebrow-wide);
  text-transform: uppercase;
  color: var(--cf-ink-3);
  font-weight: 600;
}

.cf-h1 { font-family: var(--cf-font); font-size: var(--cf-size-h1); font-weight: 700; letter-spacing: var(--cf-track-tight); color: var(--cf-ink); }
.cf-h2 { font-family: var(--cf-font); font-size: var(--cf-size-h2); font-weight: 700; letter-spacing: var(--cf-track-tight); color: var(--cf-ink); }
.cf-h3 { font-family: var(--cf-font); font-size: var(--cf-size-h3); font-weight: 700; letter-spacing: var(--cf-track-tight-1); color: var(--cf-ink); }
.cf-body { font-family: var(--cf-font); font-size: var(--cf-size-body-1); color: var(--cf-ink); line-height: 1.55; }
.cf-meta { font-family: var(--cf-font); font-size: var(--cf-size-meta); color: var(--cf-ink-2); }

@keyframes cf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}