/* ============================================================
   Sutra Design System — Root Token Layer
   Exposes core --sutra-* tokens at :root so global features
   (keyframes, body-level styles) can resolve them.
   Element-scoped tokens via Sutra-Tokens macro override these
   per-instance for BD property panel customization.
   ============================================================ */

:root {
  /* Brand */
  --sutra-color-brand-primary: #964825;
  --sutra-color-brand-primary-hover: #7d3c20;
  --sutra-color-brand-active: #5e2d18;
  --sutra-color-brand-subtle: #f5e1d4;
  --sutra-color-brand-secondary: #2c5266;
  --sutra-color-brand-secondary-hover: #1f3d4d;

  /* Text */
  --sutra-color-text-primary: #171717;
  --sutra-color-text-secondary: #525252;
  --sutra-color-text-muted: #a3a3a3;
  --sutra-color-text-on-brand: #ffffff;
  --sutra-color-text-on-secondary: #ffffff;

  /* Surface */
  --sutra-color-surface-base: #ffffff;
  --sutra-color-surface-raised: #f5f5f5;
  --sutra-color-surface-sunken: #fafafa;

  /* Border */
  --sutra-color-border-default: #d4d4d4;
  --sutra-color-border-subtle: #e5e5e5;
  --sutra-color-border-focus: #b96234;

  /* Semantic */
  --sutra-color-danger-600: #dc2626;
  --sutra-color-danger-700: #b91c1c;
  --sutra-color-success-600: #16a34a;
  --sutra-color-warning-600: #ea580c;

  /* Typography */
  --sutra-font-display: 'Lexend', system-ui, -apple-system, sans-serif;
  --sutra-font-body: 'Lexend', system-ui, -apple-system, sans-serif;
  --sutra-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --sutra-font-weight-regular: 400;
  --sutra-font-weight-medium: 500;
  --sutra-font-weight-semibold: 600;
  --sutra-font-weight-bold: 700;
  --sutra-font-size-sm: 14px;
  --sutra-font-size-md: 16px;
  --sutra-font-size-lg: 18px;
  --sutra-letter-spacing-default: 0;
  --sutra-line-height-tight: 1.2;

  /* Spacing */
  --sutra-space-xs: 4px;
  --sutra-space-sm: 8px;
  --sutra-space-md: 12px;
  --sutra-space-lg: 16px;
  --sutra-space-xl: 24px;
  --sutra-space-2xl: 32px;
  --sutra-space-3xl: 48px;
  --sutra-space-4xl: 64px;

  /* Radii */
  --sutra-radius-sm: 4px;
  --sutra-radius-md: 8px;
  --sutra-radius-lg: 12px;
  --sutra-radius-full: 9999px;

  /* Motion */
  --sutra-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sutra-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --sutra-duration-fast: 120ms;
  --sutra-duration-base: 220ms;
  --sutra-duration-slow: 380ms;

  /* Shadows */
  --sutra-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sutra-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -1px rgb(0 0 0 / 0.06);
  --sutra-shadow-lg: 0 8px 24px -2px rgb(0 0 0 / 0.18);
  --sutra-shadow-brand: 0 4px 12px -2px rgb(150 72 37 / 0.18), 0 2px 4px -1px rgb(0 0 0 / 0.06);
}