/**
 * @file
 * Main design tokens for MWP (Maine Wildlife Park) theme.
 * Contains spacing, border radius, and shadow tokens.
 * Sister theme to IFW with shared design system foundation.
 *
 * Note: Colors, typography, and components are in separate files.
 *
 * Interaction & accessibility: Use @media (hover: hover) for hover-only
 * styles (especially scale/transform) so touch devices don't get sticky
 * hover or layout shift. Keep :focus-visible styles unconditional for
 * keyboard and tap-to-focus. Respect prefers-reduced-motion for transitions.
 */

:root {

  /* ========================================
   * Spacing Scale (Logical properties ready)
   * ======================================== */
  --spacing-none: 0;
  --spacing-3xs: 0.25rem; /* 4px */
  --spacing-2xs: 0.5rem; /* 8px */
  --spacing-xs: 0.75rem; /* 12px */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2rem; /* 32px */
  --spacing-xl: 2.5rem; /* 40px */
  --spacing-2xl: 4rem; /* 64px */
  --spacing-3xl: 5rem; /* 80px */
  --spacing-mega: 7.5rem; /* 120px */

  /* ========================================
   * Layout Widths
   * ======================================== */
  --layout-max-width: 1280px;
  --layout-max-width-wide: 1400px;
  --layout-max-width-narrow: 800px;

  /* ========================================
   * Border Radius & Borders
   * ======================================== */
  --radius-sm: 0.5rem; /* 8px */
  --radius-md: 1rem; /* 16px */
  --radius-lg: 1.5rem; /* 24px */
  --radius-full: 62.4375rem; /* 9999px - for pill shapes */
  --border-primary: 1px solid var(--color-text-dark);

  /* ========================================
   * Shadows
   * ======================================== */
  --shadow-01: 0 0 9.8px -1px rgba(180, 181, 181, 0.1);
  --shadow-02: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
  --shadow-03: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}