/**
 * Fire Shop — Design Tokens
 *
 * CSS custom properties that form the foundation of the Fire Shop design system.
 * This file is enqueued on BOTH the storefront and the WordPress admin.
 * All visual decisions in fire-storefront.css and fire-admin.css reference
 * these tokens — never hard-code values that appear here.
 *
 * Token naming convention:
 *   --fire-{category}-{scale}
 *
 * Source of truth: DESIGN.md
 * @since 1.0.0
 */

/* ============================================================
   Light mode (default)
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     Colors
     ---------------------------------------------------------- */

  /** Brand / interactive */
  --fire-primary:       #1a1a1a;
  --fire-primary-hover: #333333;

  /** Surface layers */
  --fire-surface:     #FFFFFF;  /* Default card / modal background  */
  --fire-surface-alt: #F7F7F8;  /* Subtle alternate row / section bg */

  /** Borders */
  --fire-border: #E2E2E6;

  /** Text */
  --fire-text:       #1A1A1E;  /* High-emphasis body copy    */
  --fire-text-muted: #6B6B76;  /* Secondary / placeholder text */

  /** Semantic status */
  --fire-success: #1A8754;
  --fire-warning: #C27A0E;
  --fire-error:   #D93025;
  --fire-info:    #2563EB;

  /* ----------------------------------------------------------
     Spacing  (4 px base grid)
     ---------------------------------------------------------- */
  --fire-space-2xs: 2px;
  --fire-space-xs:  4px;
  --fire-space-sm:  8px;
  --fire-space-md:  16px;
  --fire-space-lg:  24px;
  --fire-space-xl:  32px;
  --fire-space-2xl: 48px;
  --fire-space-3xl: 64px;

  /* ----------------------------------------------------------
     Border radius
     Max 4px for rectangular elements (DESIGN-shop.md).
     ---------------------------------------------------------- */
  --fire-radius-sm:   2px;
  --fire-radius-md:   4px;
  --fire-radius-full: 9999px;

  /* ----------------------------------------------------------
     Reference / link color (distinct from primary action color)
     ---------------------------------------------------------- */
  --fire-cyan: #0088aa;

  /* ----------------------------------------------------------
     Typography
     Fonts are loaded via @import in fire-storefront.css.
     These variables exist here so any stylesheet can reference
     them without having to know where the @import lives.
     ---------------------------------------------------------- */
  --fire-font-display: 'Satoshi', sans-serif;        /* Marketing headlines          */
  --fire-font-body:    'Instrument Sans', sans-serif; /* UI text, form labels         */
  --fire-font-data:    'Geist', sans-serif;           /* Numbers, codes, table cells  */
  --fire-font-mono:    'Geist Mono', monospace;       /* Code blocks, order IDs       */

  /* ----------------------------------------------------------
     Motion
     Short durations keep interactions snappy.  All durations
     are zeroed by the prefers-reduced-motion block below.
     ---------------------------------------------------------- */
  --fire-duration-micro:  100ms;  /* Micro-interactions (checkbox tick, toggle) */
  --fire-duration-short:  200ms;  /* Hovers, button feedback                   */
  --fire-duration-medium: 300ms;  /* Panel slides, drawer open/close           */
  --fire-duration-long:   500ms;  /* Page-level transitions                    */

  --fire-ease-enter: ease-out;    /* Elements entering the viewport  */
  --fire-ease-exit:  ease-in;     /* Elements leaving the viewport   */
  --fire-ease-move:  ease-in-out; /* Elements repositioning in-place */

  /* ----------------------------------------------------------
     Shadows  (functional depth cues, not decorative)
     ---------------------------------------------------------- */
  --fire-shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.05);  /* Subtle card lift      */
  --fire-shadow-md: 0 2px 8px  rgba(0, 0, 0, 0.08);  /* Dropdowns, popovers   */
  --fire-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);  /* Modals, drawers       */
}

/* ============================================================
   Dark mode
   Activated by:
     [data-fire-theme="dark"]    — storefront theme toggle
     body.admin-color-modern     — WordPress admin "Modern" colour scheme
       scoped to .fire-admin wrapper to avoid bleed into core UI
   ============================================================ */
[data-fire-theme="dark"],
body.admin-color-modern .fire-admin {

  /* Brand — light text on dark surfaces */
  --fire-primary:       #ffffff;
  --fire-primary-hover: #e0e0e0;

  /* Reference / link color */
  --fire-cyan: #00D4E6;

  /* Surfaces */
  --fire-surface:     #1A1A1E;
  --fire-surface-alt: #222228;

  /* Borders */
  --fire-border: #333338;

  /* Text */
  --fire-text:       #F0F0F2;
  --fire-text-muted: #8E8E9A;

  /* Semantic — adjusted for dark backgrounds */
  --fire-success: #34D399;
  --fire-warning: #FBBF24;
  --fire-error:   #F87171;
  --fire-info:    #60A5FA;

  /* Shadows — heavier alpha because dark environments need stronger depth cues */
  --fire-shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.20);
  --fire-shadow-md: 0 2px 8px  rgba(0, 0, 0, 0.30);
  --fire-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.40);
}

/* ============================================================
   Reduced motion
   Zero out all durations for users who prefer less animation.
   Easing variables are intentionally kept so transition
   properties remain valid (a 0ms transition is harmless).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fire-duration-micro:  0ms;
    --fire-duration-short:  0ms;
    --fire-duration-medium: 0ms;
    --fire-duration-long:   0ms;
  }
}