/* =========================================================================
   Union Black — Design Tokens
   Source of truth: docs/design-guidelines.md, docs/brand-guidelines.md
   Imported from claude.ai/design "Union Black Design System 1.0".
   Reconciled to live theme `union-black`: rounded "matte glass" system —
   radius scale, reduced type. (Coral glow tokens are defined but the live
   site does not apply gradient effects, per brand hard rule "no gradients".)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: "Stack Sans Text";
  src: local("Stack Sans Text"), local("StackSansText");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color — Canonical Palette (BR-07) ---------- */
  --ub-black:       #131313;
  --ub-white:       #F4F4F4;
  --ub-accent:      #FF6666;

  /* ---------- Color — Supporting Surfaces ---------- */
  --ub-graphite:    #1A1A1A;
  --ub-steel:       #2E2E2E;
  --ub-bone:        #E8E6E1;

  /* ---------- Color — Text on Dark ---------- */
  --ub-text:        #F4F4F4;
  --ub-text-muted:  rgba(244,244,244,.68);
  --ub-text-faint:  #5C5C5C;

  /* ---------- Color — Text on Bone ---------- */
  --ub-text-on-bone:        #131313;
  --ub-text-on-bone-muted:  #5C5C5C;

  /* ---------- Color — Functional Tints ---------- */
  --ub-line:        #2E2E2E;
  --ub-line-soft:   #1F1F1F;
  --ub-line-bone:   #C9C7C2;
  --ub-hairline:    rgba(244,244,244,.10);

  /* ---------- Color — Coral Glow Ramp (defined; not applied on live site) ---------- */
  --ub-glow-1:      #FF6666;
  --ub-glow-2:      #FF9696;
  --ub-glow-3:      #FFB3B3;

  /* ---------- Material — Matte Glass ---------- */
  --ub-glass-fill:          rgba(23,23,23,.55);
  --ub-glass-fill-scrolled: rgba(20,20,20,.74);
  --ub-glass-fill-menu:     rgba(20,20,20,.92);
  --ub-glass-blur:          22px;
  --ub-glass-saturate:      135%;
  --ub-glass-border:        rgba(244,244,244,.10);
  --ub-glass-border-strong: rgba(244,244,244,.16);
  --ub-glass-shadow:        0 10px 30px rgba(0,0,0,.36);
  --ub-glass-inset:         inset 0 1px 0 rgba(244,244,244,.06);

  /* ---------- Typography — Families ---------- */
  --ub-font-display: "Stack Sans Text", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ub-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ub-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Typography — Scale (reduced & harmonised, v0.5.0) ---------- */
  --ub-fs-meta:      11px;
  --ub-fs-caption:   12px;
  --ub-fs-body:      14px;
  --ub-fs-body-sm:   13px;
  --ub-fs-lead:      clamp(15px, 1.35vw, 17px);
  --ub-fs-lead-sm:   16px;
  --ub-fs-h4:        18px;
  --ub-fs-h3:        22px;
  --ub-fs-h3-show:   clamp(22px, 2.4vw, 32px);
  --ub-fs-h2:        clamp(26px, 3vw, 40px);
  --ub-fs-h1:        clamp(30px, 3.2vw, 44px);
  --ub-fs-h1-compact: clamp(28px, 3.1vw, 40px);
  --ub-fs-stat:      clamp(36px, 4.5vw, 56px);
  --ub-fs-quote:     clamp(24px, 3vw, 34px);
  --ub-fs-marquee:   clamp(24px, 3.2vw, 40px);

  /* Line heights */
  --ub-lh-tight:    0.96;
  --ub-lh-snug:     1.2;
  --ub-lh-body:     1.6;
  --ub-lh-loose:    1.65;

  /* Letter spacing */
  --ub-tracking-display: -0.055em;
  --ub-tracking-tight:   -0.03em;
  --ub-tracking-normal:   0;
  --ub-tracking-meta:     0.1em;

  /* Weights */
  --ub-fw-regular:  400;
  --ub-fw-medium:   500;
  --ub-fw-semi:     600;
  --ub-fw-bold:     700;

  /* ---------- Spacing — 8pt base ---------- */
  --ub-s-1:   4px;
  --ub-s-2:   8px;
  --ub-s-3:   12px;
  --ub-s-4:   16px;
  --ub-s-5:   24px;
  --ub-s-6:   32px;
  --ub-s-7:   48px;
  --ub-s-8:   64px;
  --ub-s-9:   96px;
  --ub-s-10:  128px;

  /* ---------- Layout ---------- */
  --ub-grid-cols: 12;
  --ub-grid-gap:  24px;
  --ub-content-max: 1200px;
  --ub-reading-max: 68ch;

  /* ---------- Radii — rounded "matte glass" scale ---------- */
  --ub-r-sm:    8px;
  --ub-r-pane:  10px;
  --ub-r-md:    12px;
  --ub-r-14:    14px;
  --ub-r-nav:   16px;
  --ub-r-lg:    18px;
  --ub-r-mono:  6px;
  --ub-r-pill:  999px;
  --ub-r-0:     0px;

  /* ---------- Borders ---------- */
  --ub-bw-1: 1px;
  --ub-bw-2: 2px;

  /* ---------- Motion (120–280ms, eased) ---------- */
  --ub-dur-fast:   120ms;
  --ub-dur-base:   180ms;
  --ub-dur-slow:   280ms;
  --ub-dur-glow-in:  250ms;
  --ub-dur-glow-out: 750ms;
  --ub-ease:       cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Z-index ---------- */
  --ub-z-base:    1;
  --ub-z-raised:  10;
  --ub-z-overlay: 100;
  --ub-z-modal:   1000;
}

/* =========================================================================
   Typography — Hierarchy helper classes (available for new markup)
   ========================================================================= */
.ub-display, .ub-h1, .ub-h2, .ub-h3, .ub-h4 {
  font-family: var(--ub-font-display);
  font-weight: var(--ub-fw-semi);
  letter-spacing: var(--ub-tracking-display);
  line-height: var(--ub-lh-tight);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ub-display { font-size: var(--ub-fs-h1); font-weight: var(--ub-fw-bold); }
.ub-h1      { font-size: var(--ub-fs-h1); }
.ub-h1--compact { font-size: var(--ub-fs-h1-compact); }
.ub-h2      { font-size: var(--ub-fs-h2); }
.ub-h3      { font-size: var(--ub-fs-h3); letter-spacing: var(--ub-tracking-tight); line-height: var(--ub-lh-snug); }
.ub-h3--show { font-size: var(--ub-fs-h3-show); }
.ub-h4      { font-size: var(--ub-fs-h4); letter-spacing: var(--ub-tracking-tight); line-height: var(--ub-lh-snug); font-weight: var(--ub-fw-semi); }

.ub-lead    { font-size: var(--ub-fs-lead); line-height: var(--ub-lh-loose); color: var(--ub-text); max-width: var(--ub-reading-max); text-wrap: pretty; overflow-wrap: break-word; }
.ub-body    { font-size: var(--ub-fs-body); line-height: var(--ub-lh-body); color: var(--ub-text); max-width: var(--ub-reading-max); text-wrap: pretty; overflow-wrap: break-word; }
.ub-caption { font-size: var(--ub-fs-caption); line-height: var(--ub-lh-body); color: var(--ub-text-muted); overflow-wrap: break-word; }
.ub-quote   { font-family: var(--ub-font-display); font-weight: var(--ub-fw-semi); font-size: var(--ub-fs-quote); line-height: var(--ub-lh-snug); letter-spacing: var(--ub-tracking-display); margin: 0; text-wrap: balance; }
.ub-stat    { font-family: var(--ub-font-display); font-weight: var(--ub-fw-semi); font-size: var(--ub-fs-stat); line-height: 1; letter-spacing: var(--ub-tracking-display); }
.ub-meta    {
  font-family: var(--ub-font-mono);
  font-size: var(--ub-fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ub-tracking-meta);
  color: var(--ub-text-muted);
  font-weight: var(--ub-fw-medium);
}
.ub-mono { font-family: var(--ub-font-mono); }

.ub-on-bone { background: var(--ub-bone); color: var(--ub-text-on-bone); }
.ub-on-bone .ub-caption, .ub-on-bone .ub-meta { color: var(--ub-text-on-bone-muted); }
.ub-accent { color: var(--ub-accent); }

/* =========================================================================
   Layout helpers
   ========================================================================= */
.ub-container { max-width: var(--ub-content-max); margin-inline: auto; padding-inline: var(--ub-s-6); }
.ub-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ub-grid-gap); }
.ub-stack-1 { display: flex; flex-direction: column; gap: var(--ub-s-1); }
.ub-stack-2 { display: flex; flex-direction: column; gap: var(--ub-s-2); }
.ub-stack-3 { display: flex; flex-direction: column; gap: var(--ub-s-3); }
.ub-stack-4 { display: flex; flex-direction: column; gap: var(--ub-s-4); }
.ub-stack-5 { display: flex; flex-direction: column; gap: var(--ub-s-5); }
.ub-stack-6 { display: flex; flex-direction: column; gap: var(--ub-s-6); }
.ub-stack-7 { display: flex; flex-direction: column; gap: var(--ub-s-7); }
.ub-stack-8 { display: flex; flex-direction: column; gap: var(--ub-s-8); }
.ub-row-2 { display: flex; gap: var(--ub-s-2); align-items: center; flex-wrap: wrap; }
.ub-row-3 { display: flex; gap: var(--ub-s-3); align-items: center; flex-wrap: wrap; }
.ub-row-4 { display: flex; gap: var(--ub-s-4); align-items: center; flex-wrap: wrap; }
.ub-row-5 { display: flex; gap: var(--ub-s-5); align-items: center; flex-wrap: wrap; }
.ub-rule      { height: 1px; background: var(--ub-line); border: 0; margin: 0; }
.ub-rule-soft { height: 1px; background: var(--ub-line-soft); border: 0; margin: 0; }
.ub-rule-bone { height: 1px; background: var(--ub-line-bone); border: 0; margin: 0; }

/* =========================================================================
   Material — Matte glass surface
   ========================================================================= */
.ub-glass {
  background: var(--ub-glass-fill);
  -webkit-backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  border: var(--ub-bw-1) solid var(--ub-glass-border);
  box-shadow: var(--ub-glass-shadow), var(--ub-glass-inset);
  border-radius: var(--ub-r-nav);
}
.ub-glass--scrolled {
  background: var(--ub-glass-fill-scrolled);
  border-color: var(--ub-glass-border-strong);
  box-shadow: 0 14px 38px rgba(0,0,0,.46), var(--ub-glass-inset);
}
.ub-glass--menu { background: var(--ub-glass-fill-menu); border-radius: var(--ub-r-14); }

/* =========================================================================
   Components (helper library for new markup; live theme uses its own classes)
   ========================================================================= */
.ub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ub-s-2);
  font-family: var(--ub-font-body); font-size: var(--ub-fs-body); font-weight: var(--ub-fw-medium);
  letter-spacing: var(--ub-tracking-normal); line-height: 1; padding: 14px 22px;
  background: var(--ub-white); color: var(--ub-black);
  border: var(--ub-bw-1) solid var(--ub-white); border-radius: var(--ub-r-md);
  cursor: pointer;
  transition: background var(--ub-dur-base) var(--ub-ease), color var(--ub-dur-base) var(--ub-ease),
              border-color var(--ub-dur-base) var(--ub-ease), transform var(--ub-dur-fast) var(--ub-ease);
  text-decoration: none; white-space: nowrap;
}
.ub-btn:hover { transform: translateY(-2px); }
.ub-btn:active { transform: translateY(0); }
.ub-btn:focus-visible { outline: 2px solid var(--ub-accent); outline-offset: 2px; }
.ub-btn--primary  { background: var(--ub-white); color: var(--ub-black); border-color: var(--ub-white); }
.ub-btn--primary:hover  { background: var(--ub-bone); border-color: var(--ub-bone); }
.ub-btn--secondary { background: transparent; color: var(--ub-white); border-color: var(--ub-steel); }
.ub-btn--secondary:hover { border-color: var(--ub-white); }
.ub-btn--ghost { background: transparent; color: var(--ub-white); border-color: transparent; padding-inline: var(--ub-s-3); }
.ub-btn--ghost:hover { background: var(--ub-graphite); }
.ub-btn--accent { background: var(--ub-accent); color: var(--ub-black); border-color: var(--ub-accent); }
.ub-btn--accent:hover { background: transparent; color: var(--ub-accent); }
.ub-btn--sm { font-size: var(--ub-fs-caption); padding: 10px 14px; }
.ub-btn--lg { font-size: var(--ub-fs-lead-sm); padding: 18px 28px; }

.ub-input, .ub-select, .ub-textarea {
  font-family: var(--ub-font-body); font-size: var(--ub-fs-body); color: var(--ub-text);
  background: #0f0f0f; border: var(--ub-bw-1) solid var(--ub-steel); border-radius: var(--ub-r-md);
  padding: 12px 14px; width: 100%; outline: none;
  transition: border-color var(--ub-dur-base) var(--ub-ease), box-shadow var(--ub-dur-base) var(--ub-ease);
}
.ub-input::placeholder, .ub-textarea::placeholder { color: var(--ub-text-faint); }
.ub-input:focus, .ub-select:focus, .ub-textarea:focus {
  border-color: var(--ub-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ub-accent) 22%, transparent);
}
.ub-textarea { min-height: 96px; line-height: var(--ub-lh-body); resize: vertical; }
.ub-label {
  display: block; font-family: var(--ub-font-mono); font-size: var(--ub-fs-meta);
  text-transform: uppercase; letter-spacing: var(--ub-tracking-meta);
  color: var(--ub-text-muted); margin-bottom: var(--ub-s-2);
}

.ub-card {
  position: relative; background: var(--ub-graphite);
  border: var(--ub-bw-1) solid var(--ub-line); border-radius: var(--ub-r-lg); padding: var(--ub-s-6);
}
.ub-card--bone { background: var(--ub-bone); color: var(--ub-text-on-bone); border-color: var(--ub-line-bone); }

.ub-tag {
  display: inline-flex; align-items: center; gap: var(--ub-s-2);
  font-family: var(--ub-font-mono); font-size: var(--ub-fs-meta);
  text-transform: uppercase; letter-spacing: var(--ub-tracking-meta);
  color: var(--ub-text); background: transparent;
  border: var(--ub-bw-1) solid var(--ub-steel); padding: 6px 10px; border-radius: var(--ub-r-sm); white-space: nowrap;
}
.ub-tag--accent { border-color: var(--ub-accent); color: var(--ub-accent); }
.ub-tag--solid  { background: var(--ub-white); color: var(--ub-black); border-color: var(--ub-white); }
.ub-tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

.ub-status {
  display: inline-flex; align-items: center; gap: var(--ub-s-2);
  font-family: var(--ub-font-mono); font-size: var(--ub-fs-meta);
  text-transform: uppercase; letter-spacing: var(--ub-tracking-meta);
}
.ub-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent); }
.ub-status--ok    { color: #6FD3A1; }
.ub-status--warn  { color: #E8C26B; }
.ub-status--alert { color: var(--ub-accent); }
.ub-status--idle  { color: var(--ub-text-faint); }

.ub-table { width: 100%; border-collapse: collapse; font-size: var(--ub-fs-body); }
.ub-table th, .ub-table td { text-align: left; padding: var(--ub-s-3) var(--ub-s-4); border-bottom: 1px solid var(--ub-line); vertical-align: top; }
.ub-table th { font-family: var(--ub-font-mono); font-size: var(--ub-fs-meta); text-transform: uppercase; letter-spacing: var(--ub-tracking-meta); color: var(--ub-text-muted); font-weight: var(--ub-fw-medium); background: transparent; border-bottom: 1px solid var(--ub-steel); }
.ub-table tbody tr:hover { background: var(--ub-graphite); }

.ub-code { font-family: var(--ub-font-mono); font-size: var(--ub-fs-body); background: var(--ub-graphite); border: 1px solid var(--ub-line); border-radius: var(--ub-r-md); padding: var(--ub-s-4); display: block; overflow-x: auto; line-height: var(--ub-lh-body); color: var(--ub-text); white-space: pre; }
code.ub-inline { font-family: var(--ub-font-mono); font-size: 0.92em; padding: 2px 6px; background: var(--ub-graphite); border: 1px solid var(--ub-line); border-radius: var(--ub-r-sm); }

.ub-section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--ub-s-5); align-items: end; padding-bottom: var(--ub-s-5); border-bottom: 1px solid var(--ub-line); }
@media (max-width: 720px) { .ub-section-head { grid-template-columns: 1fr; } }
.ub-counter { font-family: var(--ub-font-mono); font-size: var(--ub-fs-meta); letter-spacing: var(--ub-tracking-meta); text-transform: uppercase; color: var(--ub-text-faint); }

@media (prefers-reduced-motion: reduce) {
  .ub-btn { transition: none; }
}