/**
 * WireBuddy Design Tokens
 * ========================
 * Single source of truth for all design decisions.
 * The UI linter validates against these tokens.
 *
 * Categories:
 * - Spacing: consistent spacing scale
 * - Radius: border-radius values
 * - Colors: semantic color palette
 * - Shadows: elevation system
 * - Typography: font stacks and sizes
 * - Interaction: touch targets, focus states
 * - Animation: timing and easing
 * - Layout: breakpoints, containers
 */

:root {
  /* ============================================
   * Viewport
   * ============================================ */
  --wb-viewport-h: 100dvh;

  /* ============================================
   * Spacing Scale (4px base)
   * ============================================ */
  --wb-spacing-0: 0;
  --wb-spacing-xs: 0.25rem;

  /* 4px */
  --wb-spacing-sm: 0.5rem;

  /* 8px */
  --wb-spacing-md: 1rem;

  /* 16px */
  --wb-spacing-lg: 1.5rem;

  /* 24px */
  --wb-spacing-xl: 2rem;

  /* 32px */
  --wb-spacing-2xl: 3rem;

  /* 48px */

  /* ============================================
   * Border Radius
   * ============================================ */
  --wb-radius-none: 0;
  --wb-radius-sm: 0.375rem;

  /* 6px - badges, small elements */
  --wb-radius-md: 0.75rem;

  /* 12px - cards, modals */
  --wb-radius-lg: 1rem;

  /* 16px - large containers */
  --wb-radius-pill: 9999px;

  /* pill shape */

  /* ============================================
   * Semantic Colors
   * ============================================ */
  --wb-danger: #c53a2f;
  --wb-danger-muted: rgb(197 58 47 / 10%);
  --wb-warning: #b7791f;
  --wb-warning-muted: rgb(183 121 31 / 10%);
  --wb-success: #2f855a;
  --wb-success-muted: rgb(47 133 90 / 10%);
  --wb-info: #3182ce;
  --wb-info-muted: rgb(49 130 206 / 10%);

  /* ============================================
   * Surface Colors
   * ============================================ */
  --wb-surface-muted: rgb(148 163 184 / 8%);
  --wb-surface-overlay: rgb(0 0 0 / 50%);

  /* ============================================
   * Shadows (Elevation)
   * ============================================ */
  --wb-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
  --wb-shadow-md: 0 4px 6px rgb(0 0 0 / 7%);
  --wb-shadow-lg: 0 10px 15px rgb(0 0 0 / 10%);
  --wb-card-shadow: 0 14px 30px rgb(15 23 42 / 8%);
  --wb-card-shadow-hover: 0 18px 38px rgb(15 23 42 / 12%);

  /* ============================================
   * Typography
   * ============================================ */
  --wb-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
  --wb-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, monaco, consolas, monospace;
  --wb-font-size-xs: 0.75rem;

  /* 12px */
  --wb-font-size-sm: 0.875rem;

  /* 14px */
  --wb-font-size-base: 1rem;

  /* 16px */
  --wb-font-size-lg: 1.125rem;

  /* 18px */
  --wb-font-size-xl: 1.25rem;

  /* 20px */
  --wb-font-weight-normal: 400;
  --wb-font-weight-medium: 500;
  --wb-font-weight-semibold: 600;
  --wb-font-weight-bold: 700;
  --wb-line-height-tight: 1.25;
  --wb-line-height-normal: 1.5;
  --wb-line-height-relaxed: 1.75;

  /* ============================================
   * Interaction (Touch & Focus)
   * ============================================ */
  --wb-touch-target-min: 44px;

  /* WCAG minimum */
  --wb-touch-target-min-mobile: 44px;
  --wb-touch-target-min-tablet: 40px;
  --wb-touch-target-min-desktop: 32px;
  --wb-touch-target-comfortable: 48px;

  /* Recommended */
  --wb-focus-ring-width: 3px;
  --wb-focus-ring-offset: 2px;
  --wb-focus-ring-color: rgb(59 130 246 / 50%);

  /* ============================================
   * Animation
   * ============================================ */
  --wb-transition-fast: 150ms;
  --wb-transition-base: 200ms;
  --wb-transition-slow: 300ms;
  --wb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --wb-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --wb-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ============================================
   * Layout Breakpoints
   * ============================================ */
  --wb-breakpoint-sm: 576px;
  --wb-breakpoint-md: 768px;
  --wb-breakpoint-lg: 992px;
  --wb-breakpoint-xl: 1200px;
  --wb-breakpoint-xxl: 1400px;

  /* ============================================
   * Component: Badge
   * ============================================ */
  --wb-badge-padding-y: 0.35em;
  --wb-badge-padding-x: 0.65em;
  --wb-badge-radius: var(--wb-radius-sm);
  --wb-badge-font-size: 0.75em;
  --wb-badge-font-weight: var(--wb-font-weight-semibold);

  /* ============================================
   * Component: Card
   * ============================================ */
  --wb-card-padding: var(--wb-spacing-lg);
  --wb-card-radius: var(--wb-radius-md);
  --wb-card-border-width: 1px;

  /* ============================================
   * Component: Modal
   * ============================================ */
  --wb-modal-backdrop-blur: 4px;
  --wb-modal-backdrop-opacity: 0.5;
  --wb-modal-radius: var(--wb-radius-lg);
  --wb-modal-padding: var(--wb-spacing-lg);

  /* ============================================
   * Component: Form Controls
   * ============================================ */
  --wb-input-height: 38px;
  --wb-input-padding-y: 0.375rem;
  --wb-input-padding-x: 0.75rem;
  --wb-input-radius: var(--wb-radius-sm);
  --wb-switch-height: 1.5rem;

  /* ============================================
   * Component: Retention Slider
   * ============================================ */
  --wb-slider-track-height: 0.5rem;
  --wb-slider-thumb-size: 1.25rem;
  --wb-slider-tick-gap: var(--wb-spacing-xs);

  /* ============================================
   * WCAG Contrast Requirements
   * ============================================ */
  --wb-contrast-aa-normal: 4.5;
  --wb-contrast-aa-large: 3;
  --wb-contrast-aaa-normal: 7;
  --wb-contrast-aaa-large: 4.5;

  /* ============================================
   * Accessibility
   * ============================================ */
  --wb-reduced-motion-duration: 0.01ms;
}

/* Viewport fallback for older browsers */
@supports not (height: 100dvh) {
  :root {
    --wb-viewport-h: 100vh;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wb-transition-fast: var(--wb-reduced-motion-duration);
    --wb-transition-base: var(--wb-reduced-motion-duration);
    --wb-transition-slow: var(--wb-reduced-motion-duration);
  }
}