/* ============================================================================
 * css/tokens.css — Thanh Diệp design tokens
 * ----------------------------------------------------------------------------
 * Scope:   Palette (R1.1/R1.2) + motion tokens (easing + duration)
 *          + z-layer tokens + parallax strength tokens.
 * Cohort:  cache-bust `?v=6` (import as `css/tokens.css?v=6` in index.html).
 *
 * Out of scope for this file (added in later tasks):
 *   - Derived effect-color tokens (--godray-color, --cursor-halo, …)   → task 1.4
 *   - @media (prefers-reduced-motion) overrides → task 1.4 (here).
 *     [data-perf="*"] gates → task 2.6.
 * ==========================================================================*/

:root {
  /* --------------------------------------------------------------------------
   * Palette — Thanh Diệp (R1.1)
   * Hex values fall inside the ranges fixed by requirements.md §R1.1.
   * ------------------------------------------------------------------------*/
  --green-forest: #1F3A2E;  /* R1.1 range #1F3A2E–#25442F — deep forest */
  --green-sage:   #6F8F76;  /* R1.1 range #6B8E75–#7AA085 — sage mid-tone */
  --green-mist:   #C0D6C4;  /* R1.1 range #B8D0BE–#C7DAC9 — misty sage */
  --ivory:        #F5F1E8;  /* R1.1 range #F5F1E8–#FAF6EC — warm ivory bg */
  --pearl:        #FCFAF5;  /* R1.1 range #FCFAF5–#FFFFFF — pearl bg */
  --ink:          #26342C;  /* R1.1 range #23302A–#2B3A32 — soft ink text */

  /* --------------------------------------------------------------------------
   * Palette — Brass accent (R1.2)
   * Used sparingly (≤10% surface per section, see R1.7).
   * ------------------------------------------------------------------------*/
  --brass:        #A78A4C;  /* R1.2 range #A78A4C–#B89658 — primary brass */
  --brass-light:  #D4B987;  /* R1.2 range #D4B987–#E0C89E — shimmer top */
  --brass-dark:   #8A6F38;  /* R1.2 range #8A6F38–#97793E — shimmer bottom */

  /* --------------------------------------------------------------------------
   * Typography — Font families (R1.4 / R1.5 / R1.6)
   * Canonical home for font-family tokens. `index.html` preconnects to Google
   * Fonts and <link>s in Playfair Display + Great Vibes + Montserrat so these
   * stacks resolve to the intended faces at runtime.
   *   --font-serif  → headings (.section-title, .hero-tag-names, .splash-names, h2, h3)  (R1.4)
   *   --font-script → handwritten accents (.section-accent, .hero-tag-and, .splash-label) (R1.5)
   *   --font-sans   → body + UI (body, button, input, textarea)                           (R1.6)
   * ------------------------------------------------------------------------*/
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Great Vibes', cursive;

  /* --------------------------------------------------------------------------
   * Motion — Easing curves
   * ------------------------------------------------------------------------*/
  --ease-quick:      cubic-bezier(0.4, 0, 0.2, 1);            /* UI feedback 150–250ms */
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);    /* reveals 600–900ms */
  --ease-cinematic:  cubic-bezier(0.16, 1, 0.3, 1);           /* hero/splash 1–2s */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);       /* bouncy buttons */
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55);   /* envelope crack */
  --ease-punch:      cubic-bezier(0.22, 2.0, 0.36, 0.9);      /* zoom-punch hero */

  /* --------------------------------------------------------------------------
   * Motion — Durations
   * ------------------------------------------------------------------------*/
  --dur-instant:   120ms;
  --dur-quick:     240ms;
  --dur-medium:    560ms;
  --dur-slow:      900ms;
  --dur-cinematic: 1600ms;
  --dur-splash:    2200ms;  /* cap cho 3-phase splash */
  --dur-curtain:   500ms;   /* leaf-wipe section transition */

  /* --------------------------------------------------------------------------
   * Depth — Z-layer stack (ordered back → front)
   * Mandated by task 1.1: bg-ambient, bg-decor, content, overlay, splash.
   * Additional layers (decor-front, ui, curtain) referenced elsewhere in
   * design.md (A1 splash curtain, GG3 cursor, GG7 leaf-wipe).
   * ------------------------------------------------------------------------*/
  --z-bg-ambient:  -1;     /* leaf-far parallax layer, volumetric shafts */
  --z-bg-decor:     0;     /* leaf-mid silhouettes behind content */
  --z-content:     10;     /* main sections */
  --z-decor-front: 20;     /* leaf-near foreground falling leaves */
  --z-overlay:    100;     /* lightbox, modal */
  --z-ui:         200;     /* music toggle, cursor */
  --z-curtain:   9000;     /* leaf-wipe overlay, velvet curtain */
  --z-splash:    9999;     /* 3-phase splash screen (topmost) */

  /* --------------------------------------------------------------------------
   * Motion — Parallax strength (scroll multipliers, 0–1)
   * ------------------------------------------------------------------------*/
  --parallax-strength-bg:  0.2;   /* leaf-far — slowest, blurred la2 silhouettes */
  --parallax-strength-mid: 0.5;   /* leaf-mid — static decor + bokeh */
  --parallax-strength-fg:  0.85;  /* leaf-near — foreground falling leaves */
}

/* ============================================================================
 * Reduced-motion overrides (R22.1) — hard-cap every motion token at ≤300ms
 * and disable ambient/effect knobs so no animation escapes the user's OS
 * "Reduce motion" preference. Last-loaded !important guard wins over any
 * inline or third-party animation/transition durations.
 * ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
  :root {
    /* Motion tokens — cap at ≤300ms per R22.1 */
    --dur-splash:    300ms;
    --dur-cinematic: 300ms;
    --dur-slow:      200ms;
    --dur-medium:    150ms;
    --dur-curtain:   150ms;

    /* Ambient & effect knobs — disabled under reduced-motion (design.md §C1 / R22.1).
     * These tokens are declared in :root by later ambient/perf tasks;
     * this block pre-commits their reduced-motion value.
     */
    --particle-density:               0;
    --leaf-count:                     0;
    --bokeh-count:                    0;
    --shafts-enabled:                 0;
    --rgb-sep-enabled:                0;
    --carousel-perspective-enabled:   0;
    --distortion-enabled:             0;
  }

  /* Global guard — hard-clamp every animation/transition so no motion
   * escapes the reduced-motion preference. Uses !important to defeat
   * inline styles and third-party animations. Keep scoped to this media
   * block so normal motion isn't affected for the default cohort. */
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count:      1 !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:           auto !important;
  }
}