/*
=====================================================================
 YOUMANJI THEME TOKENS
=====================================================================
 Everything art-directable lives here. When the real logos, textures,
 and palette arrive, this should be the only file that needs to change.

 Swap points are marked with  [ART], which are placeholders standing
 in for real assets.
=====================================================================
*/

:root {
  /* ---- Core palette -------------------------------------------- */
  --jungle-deepest: #07130d;
  --jungle-deep:    #0d1f16;
  --jungle:         #143026;
  --jungle-light:   #1e4433;

  --wood-dark:      #241708;
  --wood:           #3a2513;
  --wood-light:     #55381d;

  --parchment:      #e9dcbb;
  --parchment-dim:  #cdbc93;
  --parchment-deep: #a8946a;

  --brass:          #c9a227;
  --brass-bright:   #f0cf5d;
  --brass-dim:      #8a6f1a;

  --ember:          #b8471f;
  --blood:          #7d2a1a;

  --gem:            #3fbf7f;
  --gem-bright:     #6ff0ad;
  --gem-glow:       rgba(63, 191, 127, 0.55);

  /* ---- Section accents (Passion / Pain / Proficiency) ----------- */
  --passion:        #e0a02c;
  --passion-glow:   rgba(224, 160, 44, 0.45);

  --pain:           #a8402c;
  --pain-glow:      rgba(168, 64, 44, 0.45);

  --proficiency:    #4a9d76;
  --proficiency-glow: rgba(74, 157, 118, 0.45);

  /* ---- Typography ---------------------------------------------- */
  /* [ART] Swap for licensed display face when branding is final */
  --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-heading: 'Cinzel', Georgia, serif;
  --font-body:    'Alegreya', Georgia, serif;

  --fs-hero:   clamp(2.6rem, 9vw, 6rem);
  --fs-title:  clamp(1.6rem, 4vw, 2.6rem);
  --fs-lg:     clamp(1.1rem, 2vw, 1.35rem);
  --fs-body:   clamp(1rem, 1.6vw, 1.12rem);
  --fs-sm:     0.9rem;

  /* ---- Surfaces & depth ---------------------------------------- */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 26px;

  --shadow-sink:  inset 0 2px 10px rgba(0, 0, 0, 0.55);
  --shadow-raise: 0 6px 0 rgba(0, 0, 0, 0.35), 0 14px 30px rgba(0, 0, 0, 0.45);
  --shadow-card:  0 24px 60px rgba(0, 0, 0, 0.6);

  /* ---- Motion --------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bump: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:    220ms;
  --t-med:     420ms;
  --t-slow:    800ms;

  /* Pawn travel time per board space in ms. Tune the whole pace here */
  --step-duration: 260;

  /* ---- Board geometry -------------------------------------------
     Constrained by height as well as width so the die below the board
     stays on screen without scrolling. */
  --board-size: min(92vw, 58vh, 700px);
}

/*
  [ART] Texture placeholders.
  These are procedural stand-ins. Replace the `background-image` values with
  real texture files dropped into /assets and everything else still works.
*/
.tex-wood {
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(
      92deg,
      rgba(0, 0, 0, 0.16) 0px,
      rgba(0, 0, 0, 0.16) 2px,
      rgba(255, 255, 255, 0.025) 2px,
      rgba(255, 255, 255, 0.025) 5px,
      rgba(0, 0, 0, 0.09) 5px,
      rgba(0, 0, 0, 0.09) 11px
    ),
    radial-gradient(ellipse at 30% 20%, rgba(120, 80, 40, 0.35), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(80, 50, 20, 0.4), transparent 55%);
}

.tex-parchment {
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(140, 110, 60, 0.16), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(120, 90, 45, 0.2), transparent 50%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(90, 65, 30, 0.22) 100%);
}

.tex-jungle {
  background-color: var(--jungle-deep);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(30, 68, 51, 0.75), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(20, 48, 38, 0.8), transparent 50%),
    radial-gradient(circle at 50% 45%, rgba(24, 58, 42, 0.5), transparent 70%);
}

/* Reduced-motion: collapse the long board animations to near-instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --step-duration: 40;
    --t-slow: 200ms;
    --t-med: 150ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}