/* übly design tokens — copy into your codebase */
:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --ub-bg:           #0B0B0C;   /* page background */
  --ub-surface:      #141416;   /* cards, columns, panels */
  --ub-surface-2:    #1A1A1D;   /* nested / hover */
  --ub-surface-3:    #202024;   /* input fields, deeper nest */
  --ub-overlay:      rgba(0,0,0,0.55);

  /* ── Borders ──────────────────────────────────────────── */
  --ub-border:       #26262A;   /* default 1px */
  --ub-border-soft:  #1E1E22;   /* very subtle */
  --ub-border-strong:#34343A;   /* dividers in dense UI */

  /* ── Text ─────────────────────────────────────────────── */
  --ub-text:         #F0F0EE;   /* primary */
  --ub-text-2:       #A6A6A4;   /* secondary */
  --ub-text-3:       #6B6B6A;   /* tertiary / metadata */
  --ub-text-disabled:#3F3F42;

  /* ── Accent ───────────────────────────────────────────── */
  --ub-accent:       #E8854A;   /* primary action */
  --ub-accent-soft:  rgba(232,133,74,0.14);
  --ub-accent-line:  rgba(232,133,74,0.40);
  --ub-accent-hover: #F09655;

  /* ── Semantic ─────────────────────────────────────────── */
  --ub-success:      #4ADE80;
  --ub-success-soft: rgba(74,222,128,0.12);
  --ub-error:        #F87171;
  --ub-error-soft:   rgba(248,113,113,0.12);

  /* ── Type ─────────────────────────────────────────────── */
  --ub-font-ui:      'Space Grotesk', system-ui, sans-serif;
  --ub-font-mono:    'Space Mono', ui-monospace, monospace;

  /* ── Radius ───────────────────────────────────────────── */
  --ub-radius-sm: 4px;
  --ub-radius:    6px;
  --ub-radius-lg: 10px;
  --ub-radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --ub-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --ub-shadow:    0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px var(--ub-border) inset;
  --ub-shadow-lg: 0 12px 40px rgba(0,0,0,0.55);

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