/* ═══════════════════════════════════════════════════════════════
 * SPICK Tokens — canonical spacing + motion foundation
 * Created: 2026-05-19 (S84 / Live Convergence Sprint 1, PR #1)
 *
 * Companion to _typography.css. Together these form Layer-1 of the
 * canonical foundation (per S78 convergence-sequencing).
 *
 * SCOPE: Adds CSS custom-properties to :root only. No rules consume
 * these tokens yet — adding this file is visually neutral by design.
 * Subsequent merges will progressively replace direct visual-literals
 * with these tokens (one surface at a time, never big-bang).
 *
 * USAGE:
 *   padding: var(--space-4);
 *   margin-bottom: var(--space-6);
 *   transition: opacity var(--motion-normal) var(--ease-standard);
 *
 * SCALE PRINCIPLE:
 *   4px base unit. Scale-numbers skipped (5 included, 7/9/10/11 absent)
 *   to keep the canonical vocabulary tight — add new stops only when a
 *   real surface demands them, with documented reason. --space-5 (20px)
 *   is preserved because canonical .spick-card padding is 20px.
 *
 * MOTION PRINCIPLE:
 *   Calm rhythm, not jitter. Three durations cover the full surface-area.
 *   prefers-reduced-motion respected at the token-level — any consumer
 *   that uses --motion-* automatically inherits the accessibility-override.
 *
 * BROWSER-COMPAT: CSS custom-properties supported all modern browsers.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Spacing scale — 4px base, biased toward calm breathing-rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;  /* canonical .spick-card padding */
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Motion durations — calm, never jittery */
  --motion-fast: 150ms;    /* hover, micro-interaction */
  --motion-normal: 200ms;  /* default transitions, state-change */
  --motion-slow: 300ms;    /* modals, larger spatial movements */

  /* Easing curves — calm, never bouncy */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* Material-standard, default */
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);    /* gentler for entry-animations */

  /* Visual primitives — extracted from canonical .spick-card (S84 PR-2).
   * Values match the existing .spick-card literals byte-for-byte so the
   * migration is visually identical. Future surfaces can compose new
   * primitives from these tokens instead of re-introducing literals. */
  --color-bg-card: #FAFAF5;
  --color-border-soft: #E8E8E4;
  --radius-card: 12px;
  --shadow-brand: 0 1px 3px rgba(15, 110, 86, 0.04);
}

/* Accessibility-respect at the token-level: any consumer of --motion-*
 * inherits this override automatically, so reduced-motion users get
 * instant-transitions across the whole canonical surface-area. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-slow: 0ms;
  }
}