/* UrbanKit Studio — design tokens (v18 LOCK) */
:root {
  /* canvas */
  --uk-bg-0: #06070A;   /* deepest surface */
  --uk-bg-1: #0A0B0E;   /* canvas */
  --uk-bg-2: #14171C;   /* surface-1 */
  --uk-bg-3: #1A1E25;   /* raised */

  /* text */
  --uk-fg-0: #F2F1ED;   /* ink */
  --uk-fg-1: #C9C8C2;   /* mid */
  --uk-fg-2: #8A8983;   /* low / mono labels */
  --uk-fg-3: #5C5B57;   /* metadata */

  /* hairline */
  --uk-line-0: #2A2D34;
  --uk-line-1: #3A3D44;

  /* primary accent — civic blue */
  --uk-accent: #1320E5;
  --uk-accent-text: #5862F7;
  --uk-accent-glow: rgba(88, 98, 247, 0.18);

  /* warm secondary — editorial moments only (rust, used sparingly) */
  --uk-warm: #E8744E;
  --uk-warm-text: #F39570;
  --uk-warm-glow: rgba(243, 149, 112, 0.14);

  /* status */
  --uk-warn: #E8B045;
  --uk-err:  #E84545;
  --uk-ok:   #16A55E;

  /* type — distinctive display + editorial serif + mono instrument */
  --uk-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --uk-display: "Archivo", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --uk-serif: "Fraunces", ui-serif, Georgia, serif;
  --uk-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* radii */
  --uk-r-0: 0px; --uk-r-1: 2px; --uk-r-2: 4px;

  /* spacing scale (4px base) */
  --uk-s-1: 4px;  --uk-s-2: 8px; --uk-s-3: 12px;
  --uk-s-4: 16px; --uk-s-5: 24px; --uk-s-6: 32px;
  --uk-s-7: 48px; --uk-s-8: 64px; --uk-s-9: 96px;
}

html, body { background: var(--uk-bg-1); color: var(--uk-fg-0); }
body { font-family: var(--uk-sans); -webkit-font-smoothing: antialiased; }
.uk-mono { font-family: var(--uk-mono); }
.uk-serif { font-family: var(--uk-serif); }
.uk-display { font-family: var(--uk-display); }
.uk-label { font-family: var(--uk-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--uk-fg-2); }
.uk-hairline { border-color: var(--uk-line-0); }

/* buttons */
.uk-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; font:600 12px/1 var(--uk-mono); letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--uk-fg-0); border:1px solid var(--uk-line-1); text-decoration:none; cursor:pointer; transition:border-color .15s, background .15s }
.uk-btn:hover { border-color: var(--uk-fg-2) }
.uk-btn--primary { background: var(--uk-accent); border-color: var(--uk-accent); color: var(--uk-fg-0) }
.uk-btn--primary:hover { background: var(--uk-accent-text); border-color: var(--uk-accent-text) }