/**
 * @file        tokens.css
 * @description All design tokens from WishWhisper-DesignGuideline.md §2-§4, §7, §9 and §10
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         0a38ab12-ccb6-43fd-ba8b-1a983d2809f7
 * @version     0.3.0.4
 * @created     2026-10-12
 * @updated     2026-10-13
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* DG §11: a token changes here and in the Design Guideline in the same change. */
:root {
  /* §2 Colour */
  --color-bg: #14102B;
  --color-surface: #1E1941;
  --color-surface-alt: #2A2357;
  --color-border: #3A3270;
  --color-text: #F3F0FF;
  --color-text-muted: #B4AED6;
  --color-primary: #FFC83D;
  --color-primary-hover: #FFD866;
  --color-primary-active: #E6AE20;
  --color-on-primary: #14102B;
  --color-accent: #A78BFA;
  --color-accent-hover: #C4B5FD;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-error: #FF6B6B;
  --color-star-empty: #4A4380;
  --color-glow: #A78BFA66;
  --color-overlay: #14102BCC;

  /* §3 Typography */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-h1-mobile: 26px;
  --font-size-h1: 32px;
  --font-size-h2-mobile: 20px;
  --font-size-h2: 24px;
  --font-size-body: 16px;
  --font-size-meta: 13px;
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-body: 1.5;
  --line-height-meta: 1.4;

  /* §4 Spacing and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --size-touch-target: 44px;
  --size-content-max: 1120px;
  --size-mascot: 96px;
  --size-mascot-desktop: 144px;
  --size-spirit-stage: 120px;
  --size-spirit-stage-desktop: 240px;
  --border-width: 1px;

  /* §7 Motion */
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --duration-toast: 4000ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Interaction motion (DG §7.1): movement amounts; 0 / 1 with prefers-reduced-motion. */
  --motion-lift: 6px;
  --motion-rise: 24px;
  --motion-zoom: 1.08;
  --motion-press: 0.96;
  /* Small product card zoom on hover; kept under reduced motion by owner request (D-31). */
  --motion-card-zoom: 1.04;
  --duration-ripple: 600ms;

  /* §9 Accessibility */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* §10 Breakpoints (reference values; media queries cannot read custom properties) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1440px;
}

/* Calm tier: glows, colour, shadow and fades stay; movement goes (DG §7.1). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-lift: 0px;
    --motion-rise: 0px;
    --motion-zoom: 1;
    --motion-press: 1;
  }
}