/**
 * Alpha Control shared design tokens.
 *
 * Numeric tokens (radius / space / font-size / shadow) are theme-agnostic
 * and live in :root. Theme-specific colors stay in each [data-theme] block
 * inside the page that defines them.
 *
 * Pages may opt-in by linking this stylesheet and replacing magic numbers
 * with var(--radius-md) etc. Existing literals keep working until migrated.
 */
:root {
  /* spacing scale (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* corner radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 9999px;

  /* shared component geometry */
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 42px;
  --page-gutter-sm: 12px;
  --page-gutter-md: 20px;
  --page-gutter-lg: 24px;

  /* font-size scale */
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  /* canonical breakpoints (mirrored in JS where needed) */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;

  /* DAG edge type tokens — overridden per theme below if desired */
  --edge-default:        #3b82f6;
  --edge-blocks:         #d9480f;
  --edge-verifies:       #0f766e;
  --edge-related:        #6b7280;
  --edge-legacy-sequence: #9ca3af;

  /* Common z-index ladder */
  --z-header: 100;
  --z-dropdown: 150;
  --z-modal: 200;
  --z-toast: 400;

  /* shared elevation and motion */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 18px 52px rgba(15, 23, 42, 0.2);
  --motion-fast: 0.15s ease;
  --motion-base: 0.2s ease;
}