/* Sutra design tokens — stable semantic contracts for every feature surface. */
:root {
  /* Spacing (4px base). */
  --sutra-space-0: 0;
  --sutra-space-1: 0.25rem;
  --sutra-space-2: 0.5rem;
  --sutra-space-3: 0.75rem;
  --sutra-space-4: 1rem;
  --sutra-space-5: 1.25rem;
  --sutra-space-6: 1.5rem;
  --sutra-space-8: 2rem;
  --sutra-space-10: 2.5rem;
  --sutra-space-12: 3rem;

  /* Type scale. */
  --sutra-font-xs: 0.75rem;
  --sutra-font-sm: 0.875rem;
  --sutra-font-md: 1rem;
  --sutra-font-lg: 1.125rem;
  --sutra-font-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --sutra-font-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --sutra-line-tight: 1.25;
  --sutra-line-body: 1.55;

  /* Shape and control sizing. */
  --sutra-radius-sm: 0.5rem;
  --sutra-radius-md: 0.75rem;
  --sutra-radius-lg: 1rem;
  --sutra-radius-pill: 999px;
  --sutra-target-min: 2.75rem;

  /* Semantic colors map onto every active theme. */
  --sutra-color-canvas: var(--bg-primary, #fff);
  --sutra-color-surface: var(--bg-secondary, #f6f6f7);
  --sutra-color-elevated: var(--bg-elevated, var(--sutra-color-surface));
  --sutra-color-text: var(--text-primary, #242424);
  --sutra-color-text-muted: var(--text-secondary, #686868);
  --sutra-color-border: var(--surface-border, var(--border, rgba(30, 30, 30, 0.18)));
  --sutra-color-accent: var(--accent-strong, var(--accent, #526ff4));
  --sutra-color-info: var(--accent-blue, #2878d0);
  --sutra-color-success: var(--success, #27864f);
  --sutra-color-warning: var(--warning, #a86800);
  --sutra-color-danger: var(--danger, #bb3535);
  --sutra-color-danger-surface: color-mix(in srgb, var(--sutra-color-danger) 13%, var(--sutra-color-surface));
  --sutra-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sutra-color-accent) 34%, transparent);
  --sutra-focus-outline: 2px solid var(--sutra-color-accent);

  /* Motion. */
  --sutra-motion-fast: 120ms;
  --sutra-motion-normal: 180ms;
  --sutra-motion-slow: 280ms;
  --sutra-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sutra-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* Documented z-index ladder. Feature CSS should use these tokens. */
  --z-content: 0;
  --z-sticky: 100;
  --z-nav: 2400;
  --z-fab: 2600;
  --z-dropdown: 5200;
  --z-popover: 7000;
  --z-overlay: 9000;
  --z-modal: 14000;
  --z-toast: 14600;
  --z-recovery: 99990;
  --z-takeover: 100000;

  --sutra-safe-top: env(safe-area-inset-top, 0px);
  --sutra-safe-right: env(safe-area-inset-right, 0px);
  --sutra-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sutra-safe-left: env(safe-area-inset-left, 0px);
  --sutra-mobile-nav-height: 4.75rem;
}

/* Preset and generated themes attach their palette to body. Re-resolve the
   shared focus contract at that same scope so controls use the active theme's
   accent instead of the root fallback (the warm onboarding gold). */
body {
  --sutra-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-strong, var(--accent, #526ff4)) 34%, transparent);
  --sutra-focus-outline: 2px solid var(--accent-strong, var(--accent, #526ff4));
}

[data-theme="dark"],
[data-theme-key="dark"],
body.dark-mode {
  color-scheme: dark;
  --sutra-color-danger: var(--danger, #ff7575);
  --sutra-color-warning: var(--warning, #f2b95f);
  --sutra-color-success: var(--success, #63ce8d);
}