/* ==========================================================
   Twiddle token contract — v0.1
   Default values for every role token. Prototypes use ONLY
   these variables; the Twiddle panel overrides them live.
   ========================================================== */

:root {
  /* ---------- Typography ---------- */
  --twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Balanced scale (1.2) from a 16px base */
  --twd-text-xs: 0.694rem;
  --twd-text-sm: 0.833rem;
  --twd-text-base: 1rem;
  --twd-text-lg: 1.2rem;
  --twd-text-xl: 1.44rem;
  --twd-text-2xl: 1.728rem;
  --twd-text-3xl: 2.074rem;

  --twd-leading-tight: 1.2;
  --twd-leading-normal: 1.5;

  /* ---------- Colour (roles) ---------- */
  --twd-bg: #fafafa;
  --twd-surface: #ffffff;
  --twd-surface-raised: #ffffff;
  --twd-text: #18181b;
  --twd-text-muted: #71717a;
  --twd-border: #e4e4e7;
  --twd-primary: #4f46e5;
  --twd-primary-hover: #4338ca;
  --twd-on-primary: #ffffff;
  --twd-focus: #6366f1;
  --twd-success: #16a34a;
  --twd-warning: #d97706;
  --twd-danger: #dc2626;

  /* ---------- Shape ---------- */
  --twd-radius-control: 8px;
  --twd-radius-container: 12px;

  /* ---------- Density ---------- */
  --twd-space-1: 4px;
  --twd-space-2: 8px;
  --twd-space-3: 12px;
  --twd-space-4: 16px;
  --twd-space-5: 24px;
  --twd-space-6: 32px;
  --twd-space-7: 48px;
  --twd-space-8: 64px;
  --twd-control-height: 40px;
  --twd-control-pad-x: 16px;

  /* ---------- Depth ---------- */
  --twd-border-width: 1px;
  --twd-border-width-container: var(--twd-border-width); /* cards, menus */
  --twd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --twd-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --twd-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
}