/* ustack OS — design tokens
   Warm graphite base · per-vertical accents · operational density */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* Type */
  --us-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --us-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --us-font-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;

  /* Warm graphite scale (cream-toned neutrals — preserves ustack's existing warmth) */
  --us-paper:    #f6f4ef;   /* canvas / app bg */
  --us-paper-2:  #ecebe5;   /* secondary surface */
  --us-paper-3:  #e2dfd6;   /* divider / inset */
  --us-card:     #fbfaf7;   /* card surface */
  --us-line:     #d8d4c8;   /* hairline */
  --us-line-2:   #c8c3b3;   /* stronger hairline */
  --us-ink:      #1a1814;   /* primary text */
  --us-ink-2:    #3a362d;   /* secondary text */
  --us-ink-3:    #6b6557;   /* tertiary / metadata */
  --us-ink-4:    #9a9382;   /* placeholder / disabled */

  /* Semantic */
  --us-positive: oklch(0.55 0.13 145);
  --us-warn:     oklch(0.68 0.16 75);
  --us-danger:   oklch(0.55 0.20 25);
  --us-pending:  oklch(0.62 0.14 240);

  /* Vertical accent — overridden per surface */
  --us-accent:   oklch(0.42 0.13 250);   /* default: blueprint indigo (DrawRequest) */
  --us-accent-soft: oklch(0.92 0.04 250);
  --us-accent-ink:  oklch(0.30 0.13 250);

  /* Spacing scale (4px base) */
  --us-1: 4px;  --us-2: 8px;  --us-3: 12px; --us-4: 16px;
  --us-5: 20px; --us-6: 24px; --us-8: 32px; --us-10: 40px;
  --us-12: 48px; --us-16: 64px;

  /* Radii — restrained */
  --us-r-1: 3px; --us-r-2: 6px; --us-r-3: 10px;

  /* Shadows */
  --us-sh-1: 0 1px 0 rgba(40,30,20,.04), 0 1px 2px rgba(40,30,20,.04);
  --us-sh-2: 0 2px 4px rgba(40,30,20,.05), 0 4px 16px rgba(40,30,20,.06);
  --us-sh-3: 0 8px 32px rgba(40,30,20,.12);
}

/* Per-vertical accent themes — apply class to surface */
.theme-drawrequest { --us-accent: oklch(0.42 0.13 250); --us-accent-soft: oklch(0.93 0.03 250); --us-accent-ink: oklch(0.28 0.13 250); }
.theme-dispatchhq  { --us-accent: oklch(0.62 0.18 55);  --us-accent-soft: oklch(0.94 0.05 75);  --us-accent-ink: oklch(0.40 0.14 50); }
.theme-kitchenops  { --us-accent: oklch(0.50 0.11 130); --us-accent-soft: oklch(0.93 0.04 125); --us-accent-ink: oklch(0.35 0.10 130); }
.theme-venueflow   { --us-accent: oklch(0.55 0.15 15);  --us-accent-soft: oklch(0.94 0.04 15);  --us-accent-ink: oklch(0.38 0.13 15); }
.theme-inspectkit  { --us-accent: oklch(0.58 0.17 95);  --us-accent-soft: oklch(0.94 0.06 95);  --us-accent-ink: oklch(0.38 0.12 90); }
.theme-rfproom     { --us-accent: oklch(0.48 0.10 200); --us-accent-soft: oklch(0.92 0.04 200); --us-accent-ink: oklch(0.32 0.10 200); }
.theme-jobshop     { --us-accent: oklch(0.40 0.05 270); --us-accent-soft: oklch(0.91 0.02 270); --us-accent-ink: oklch(0.25 0.05 270); }
.theme-clienthub   { --us-accent: oklch(0.52 0.13 320); --us-accent-soft: oklch(0.93 0.04 320); --us-accent-ink: oklch(0.35 0.13 320); }

/* Base resets inside the canvas */
.us {
  font-family: var(--us-font-sans);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  color: var(--us-ink);
  background: var(--us-paper);
  line-height: 1.35;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
.us * { box-sizing: border-box; }
.us h1,.us h2,.us h3,.us h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.us p { margin: 0; }
.us .mono { font-family: var(--us-font-mono); font-feature-settings: "zero","ss01"; }
.us .serif { font-family: var(--us-font-serif); }
.us .num   { font-variant-numeric: tabular-nums; }
.us .eyebrow {
  font-family: var(--us-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--us-ink-3);
}
.us .hairline { border: 0; border-top: 1px solid var(--us-line); }
.us .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--us-font-mono); font-size: 10.5px;
  border: 1px solid var(--us-line); color: var(--us-ink-2);
  background: var(--us-card);
  letter-spacing: 0.02em;
}
.us .chip.dot::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--us-ink-3); }
.us .chip.accent { background: var(--us-accent-soft); border-color: color-mix(in oklab, var(--us-accent) 25%, var(--us-line)); color: var(--us-accent-ink); }
.us .chip.accent.dot::before { background: var(--us-accent); }
.us .chip.warn { background: color-mix(in oklab, var(--us-warn) 14%, transparent); color: color-mix(in oklab, var(--us-warn) 60%, black); border-color: color-mix(in oklab, var(--us-warn) 35%, var(--us-line)); }
.us .chip.warn.dot::before { background: var(--us-warn); }
.us .chip.pos  { background: color-mix(in oklab, var(--us-positive) 12%, transparent); color: color-mix(in oklab, var(--us-positive) 60%, black); border-color: color-mix(in oklab, var(--us-positive) 30%, var(--us-line)); }
.us .chip.pos.dot::before  { background: var(--us-positive); }
.us .chip.danger { background: color-mix(in oklab, var(--us-danger) 12%, transparent); color: color-mix(in oklab, var(--us-danger) 65%, black); border-color: color-mix(in oklab, var(--us-danger) 35%, var(--us-line)); }
.us .chip.danger.dot::before { background: var(--us-danger); }
.us .chip.pend { background: color-mix(in oklab, var(--us-pending) 12%, transparent); color: color-mix(in oklab, var(--us-pending) 60%, black); border-color: color-mix(in oklab, var(--us-pending) 30%, var(--us-line)); }
.us .chip.pend.dot::before { background: var(--us-pending); }

.us .card { background: var(--us-card); border: 1px solid var(--us-line); border-radius: var(--us-r-2); }
.us .card.flat { background: transparent; }

/* Blueprint grid background — used on hero/marquee surfaces */
.us .grid-bg {
  background-image:
    linear-gradient(to right, rgba(26,24,20,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,24,20,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.us .dot-bg {
  background-image: radial-gradient(circle, rgba(26,24,20,0.10) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.us .striped {
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(26,24,20,0.05) 8px 9px);
}

/* Buttons */
.us .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--us-r-2);
  font: 500 12px var(--us-font-sans); letter-spacing: -0.005em;
  border: 1px solid var(--us-line); background: var(--us-card); color: var(--us-ink);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.us .btn:hover { background: var(--us-paper-2); }
.us .btn.primary { background: var(--us-ink); color: var(--us-paper); border-color: var(--us-ink); }
.us .btn.primary:hover { background: var(--us-ink-2); }
.us .btn.accent { background: var(--us-accent); color: white; border-color: var(--us-accent); }
.us .btn.ghost { background: transparent; border-color: transparent; }
.us .btn.sm { padding: 4px 8px; font-size: 11px; }

/* Tables */
.us .tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.us .tbl th { text-align: left; font: 500 10.5px var(--us-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--us-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--us-line); }
.us .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--us-line); color: var(--us-ink-2); }
.us .tbl tr:last-child td { border-bottom: 0; }
.us .tbl tr:hover td { background: var(--us-paper-2); }

/* Marker / annotation */
.us .marker { color: var(--us-accent); }
.us .underline-wavy { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: color-mix(in oklab, var(--us-accent) 60%, transparent); text-underline-offset: 3px; }

/* Workflow lozenge — used in handoff bar */
.us .step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1px solid var(--us-line); background: var(--us-card);
  font: 500 11px var(--us-font-sans); color: var(--us-ink-3);
}
.us .step.done { color: var(--us-ink-2); }
.us .step.done .step-bullet { background: var(--us-positive); }
.us .step.active {
  border-color: var(--us-accent);
  background: var(--us-accent-soft);
  color: var(--us-accent-ink);
}
.us .step.active .step-bullet { background: var(--us-accent); }
.us .step-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--us-line-2); }
.us .step-bullet.ring { background: transparent; border: 1.5px solid var(--us-line-2); }