/**
 * GOTB Design Blocks — Shared CSS tokens
 * Use these variables across all blocks for consistent spacing, motion, and theming.
 */

:root {
  /* Spacing */
  --gotb-space-xs: 4px;
  --gotb-space-sm: 8px;
  --gotb-space-md: 16px;
  --gotb-space-lg: 24px;
  --gotb-space-xl: 32px;
  --gotb-space-2xl: 48px;

  /* Breakpoints (for reference; use in media queries) */
  --gotb-bp-mobile: 768px;
  --gotb-bp-tablet: 1024px;
  --gotb-bp-desktop: 1280px;

  /* Motion */
  --gotb-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --gotb-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gotb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --gotb-duration-fast: 0.15s;
  --gotb-duration-normal: 0.25s;
  --gotb-duration-slow: 0.4s;

  /* Radius */
  --gotb-radius-sm: 4px;
  --gotb-radius-md: 8px;
  --gotb-radius-lg: 12px;
  --gotb-radius-xl: 20px;

  /* Shadows */
  --gotb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --gotb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --gotb-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Placeholder (editor empty-state blocks) */
  --gotb-placeholder-bg: #f8f9fa;
  --gotb-placeholder-border: 2px dashed #dee2e6;
  --gotb-placeholder-text: #6c757d;
  --gotb-placeholder-icon: #adb5bd;

  /* Block-specific tokens (overridable per block) */
  --gotb-logo-size: 150px;
  --gotb-logo-size-tablet: 120px;
  --gotb-logo-size-mobile: 80px;
  --gotb-logo-gap: 8px;
  --gotb-horiz-gap: 24px;
  --gotb-horiz-r: 16 / 9;
}