/* ==========================================================
   Panel token contract — v0.4
   Default values for every role token. Prototypes use ONLY
   these variables; the 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;

  /* Weights (v0.3). The Character pad's Subtle ↔ Bold moves them
     (heading 400…800, strong 500…700); body text stays as it is. */
  --twd-weight-heading: 600; /* headings, big numbers */
  --twd-weight-strong: 600;  /* buttons, labels, emphasis */

  /* ---------- 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;

  /* ---------- Layout roles (v0.2) ----------
     Optional. Each points at a spacing step, so Density still scales it,
     and the panel's Edit › Spacing › Roles can point it at another step
     or a fixed value. Use them where they fit; space-1…8 still work. */
  --twd-page-pad: var(--twd-space-5);     /* side padding of the page */
  --twd-section-gap: var(--twd-space-6);  /* between page sections */
  --twd-card-pad: var(--twd-space-5);     /* inside cards, menus, modals */
  --twd-card-gap: var(--twd-space-2);     /* between items in a card */
  --twd-control-gap: var(--twd-space-3);  /* between buttons, chips, inputs in a row */

  /* ---------- 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);

  /* ---------- Component styles (v0.4) ----------
     Optional. The main button and the default card. Each points at
     the tokens above, so Colour, Depth and the Character pad still
     reach them; the panel's Shape › Style swaps the recipe. */
  --twd-button-bg: var(--twd-primary);
  --twd-button-fg: var(--twd-on-primary);
  --twd-button-border: transparent;
  --twd-button-hover: var(--twd-primary-hover); /* background on hover */
  --twd-card-bg: var(--twd-surface);
  --twd-card-border: var(--twd-border);
  --twd-card-shadow: var(--twd-shadow-sm);
}