/**
 * design-tokens.css (Batch 17)
 *
 * Shared visual design tokens for all WordPress-rendered surfaces
 * (qookey.com marketing/Elementor pages, qk.qookey.com admin/vendor shells
 * where rendered via WP, and any future iOS/web wrapper per item #20).
 * Mirrors lib/core/design/design_tokens.dart so Flutter-web and WordPress
 * stay visually consistent without sharing a build pipeline — both read
 * from this same source-of-truth vocabulary (color names, spacing scale,
 * type scale, breakpoints).
 *
 * Enqueue this file FIRST, before any Elementor theme/page CSS, on every
 * QooKey-branded page (WORDPRESS_PERFORMANCE_GOVERNANCE.md governs loading
 * order and conditional enqueueing).
 */

:root {
  /* Brand color ramp */
  --qk-color-primary-50: #eef6ff;
  --qk-color-primary-100: #d9ecff;
  --qk-color-primary-300: #7cb8ff;
  --qk-color-primary-500: #1f7af0;
  --qk-color-primary-700: #14559e;
  --qk-color-primary-900: #0a2c52;

  --qk-color-accent-500: #ff8a1f;

  /* Neutrals */
  --qk-color-neutral-0: #ffffff;
  --qk-color-neutral-50: #f7f8fa;
  --qk-color-neutral-100: #eceef1;
  --qk-color-neutral-300: #c7ccd3;
  --qk-color-neutral-500: #8a919b;
  --qk-color-neutral-700: #4b5159;
  --qk-color-neutral-900: #1c2126;

  /* Semantic / status (kept distinct from brand ramp on purpose — see
     PaymentEventStatus/SubscriptionStatus etc. status colors in Dart) */
  --qk-color-success-500: #1f9d55;
  --qk-color-warning-500: #e0a800;
  --qk-color-danger-500: #d1373f;
  --qk-color-info-500: #1f7af0;

  /* Operational coordination layer (item #87) — "returning" state needs a
     color distinct from primary/info blue (per
     OperationalAvailabilityState's AVAILABLE/green, DISCUSSING/amber,
     OCCUPIED/red, RETURNING/blue-or-purple split). Mirrors
     QkColors.violet500 (design_tokens.dart) 1:1 by hex value. */
  --qk-color-violet-500: #7c5cff;

  /* Spacing scale (4px base, matches Flutter EdgeInsets convention) */
  --qk-space-1: 4px;
  --qk-space-2: 8px;
  --qk-space-3: 12px;
  --qk-space-4: 16px;
  --qk-space-5: 24px;
  --qk-space-6: 32px;
  --qk-space-7: 48px;
  --qk-space-8: 64px;

  /* Typography scale */
  --qk-font-family-base: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --qk-font-size-xs: 12px;
  --qk-font-size-sm: 14px;
  --qk-font-size-base: 16px;
  --qk-font-size-lg: 20px;
  --qk-font-size-xl: 28px;
  --qk-font-size-2xl: 40px;
  --qk-line-height-tight: 1.2;
  --qk-line-height-base: 1.5;

  /* Radii / elevation */
  --qk-radius-sm: 4px;
  --qk-radius-md: 8px;
  --qk-radius-lg: 16px;
  --qk-shadow-sm: 0 1px 2px rgba(28, 33, 38, 0.08);
  --qk-shadow-md: 0 4px 12px rgba(28, 33, 38, 0.12);

  /* Breakpoints (informational — CSS can't read these in media queries,
     kept here so the value is documented next to the rest of the scale;
     responsive-base.css hardcodes the same numbers) */
  --qk-breakpoint-sm: 480px;
  --qk-breakpoint-md: 768px;
  --qk-breakpoint-lg: 1024px;
  --qk-breakpoint-xl: 1280px;

  /* Motion (used by motion/scroll-reveal.js) */
  --qk-motion-duration-fast: 150ms;
  --qk-motion-duration-base: 250ms;
  --qk-motion-duration-slow: 400ms;
  --qk-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Per-item stagger step for cascading reveals (Batch 22, item #75) —
     matches QkMotionDurations.staggerStepMs (design_tokens.dart) and
     STAGGER_STEP_MS in motion/scroll-reveal.js. Used via
     data-qk-reveal-delay="{index * stagger step, capped at 6 steps}" in
     class-qk-feature-grid-widget.php, class-qk-testimonial-widget.php,
     class-qk-news-list-widget.php. */
  --qk-motion-stagger-step: 100ms;
}

/* Respect reduced-motion preference globally — any animation/transition
   using the --qk-motion-* tokens should be neutralized here rather than
   per-component, so this is a single switch (low-end-device friendly). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --qk-motion-duration-fast: 0ms;
    --qk-motion-duration-base: 0ms;
    --qk-motion-duration-slow: 0ms;
  }
}