/* ===========================================================================
   Starfall Academy — Elevation, gilding & motion tokens
   Shadows are deep and soft against the midnight canvas. Gilding is expressed
   as thin gold strokes and subtle metallic gradients, never heavy bevels.
   =========================================================================== */

:root {
  /* ---- Elevation (soft shadow on dark) --------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg:  0 14px 40px rgba(0,0,0,0.55);
  --shadow-xl:  0 28px 70px rgba(0,0,0,0.6);
  /* Gilded glow — a faint gold halo for hero / focus moments */
  --glow-gold:  0 0 0 1px color-mix(in oklab, var(--gold-500) 40%, transparent),
                0 8px 30px color-mix(in oklab, var(--gold-600) 22%, transparent);
  /* Inset top highlight for raised gilded surfaces */
  --inset-hi:   inset 0 1px 0 color-mix(in oklab, var(--gold-200) 12%, transparent);

  /* ---- Metallic gradients ---------------------------------------------- */
  --grad-gold:        linear-gradient(150deg, #e8d49a 0%, #c9ae63 38%, #b99d53 60%, #8c7438 100%); /* @kind other */
  --grad-gold-soft:   linear-gradient(150deg, #d2bb74 0%, #b99d53 70%, #9a7f3d 100%); /* @kind other */
  /* Page vignette — midnight deepening at the edges */
  --grad-vignette:    radial-gradient(120% 90% at 50% -10%, #181a26 0%, #0f1118 45%, #0b0c11 100%); /* @kind other */
  /* Parchment sheet */
  --grad-parchment:   linear-gradient(180deg, #f7f3e7 0%, #efead8 100%); /* @kind other */
  /* Bottom protection gradient for imagery */
  --grad-scrim:       linear-gradient(180deg, transparent 0%, rgba(8,9,13,0.85) 100%); /* @kind other */

  /* ---- Hairline / gilded rule ------------------------------------------ */
  --rule-gold: linear-gradient(90deg, transparent, var(--gold-600) 18%, var(--gold-400) 50%, var(--gold-600) 82%, transparent); /* @kind other */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   340ms; /* @kind other */
  --dur-stately: 600ms;  /* @kind other */
}