/* ============================================================
   SiRR — Effects: shadows, motion, patterns
   Soft, warm, diffuse shadows (lit-from-above gallery light).
   No harsh black drop shadows — tinted toward indigo/taupe.
   ============================================================ */

:root {
  /* ---- Elevation (warm, diffuse) ------------------------- */
  --shadow-xs:  0 1px 2px rgba(35, 44, 82, 0.06);
  --shadow-sm:  0 2px 8px rgba(35, 44, 82, 0.08);
  --shadow-md:  0 8px 24px rgba(35, 44, 82, 0.10);
  --shadow-lg:  0 18px 48px rgba(20, 24, 46, 0.14);
  --shadow-xl:  0 30px 80px rgba(20, 24, 46, 0.20);
  /* Gilded glow — used sparingly on gold elements/hover */
  --shadow-gold: 0 6px 22px rgba(194, 162, 78, 0.30);
  /* Inset well for input fields on cream */
  --shadow-inset: inset 0 1px 2px rgba(74, 67, 52, 0.10);

  /* ---- Motion -------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-reveal: 700ms;

  /* ---- Gradients & scrims -------------------------------- */
  /* Protection scrim for text over imagery (bottom-up) */
  --scrim-bottom: linear-gradient(to top,
      rgba(20, 24, 46, 0.78) 0%,
      rgba(20, 24, 46, 0.30) 45%,
      rgba(20, 24, 46, 0) 80%);
  /* Brass foil sheen for gold type / rules */
  --gold-sheen: linear-gradient(100deg,
      #A6822F 0%, #E3D2A0 28%, #C2A24E 52%, #F3EBD6 70%, #B08A3A 100%);
  /* Indigo depth wash for dark sections */
  --indigo-wash: linear-gradient(160deg, #232C52 0%, #1B2240 60%, #14182E 100%);
}

/* ---- Zellij hairline pattern (decorative background) -----
   A faint Moroccan geometric net in gold, for dark sections.
   Apply: background-image: var(--pattern-zellij); on indigo. */
:root {
  --pattern-zellij:
    repeating-linear-gradient(45deg,  rgba(194,162,78,0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(194,162,78,0.05) 0 1px, transparent 1px 26px);
}