/* ============================================================
   Gilded Quay — Design Tokens
   Source of truth: 2.Design System/files/design.md v1.0
   ============================================================ */

:root {
  /* ---------- Foundation / neutrals (≈70%) ---------- */
  --paper:    #F4ECDB;
  --ivory:    #FBF7EE;
  --linen:    #E9DEC8;
  --sand:     #D8C8A8;
  --taupe:    #9B8B6A;
  --sepia:    #6E624C;
  --charcoal: #34302A;
  --ink:      #2B2620;

  /* ---------- Gold & signature (≈20%) ---------- */
  --gold:      #BF9D54;
  --gold-deep: #8A6B27;
  --champagne: #E7D2AC;
  --rose:      #C68B82;
  --blush:     #EAD2CB;
  --sage:      #AEB994;
  --olive:     #5E6A45;
  --slate:     #8FA0B4;

  /* ---------- Heritage jewels (≈10%) ---------- */
  --garnet:  #6E2A20;
  --emerald: #2F5E45;
  --navy:    #20305A;

  /* ---------- Type ---------- */
  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Jost", "Century Gothic", sans-serif;
  --script: "Pinyon Script", cursive;

  /* ---------- Spacing (8pt base) ---------- */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* ---------- Radii (Deco favours crisp corners) ---------- */
  --r-sm: 2px;
  --r-md: 4px;

  /* ---------- Elevation — warm-tinted, soft ---------- */
  --shadow-soft: 0 22px 48px -28px rgba(43, 38, 32, 0.45);
  --shadow-card: 0 14px 30px -22px rgba(43, 38, 32, 0.40);

  /* ---------- Strokes ---------- */
  --rule: 1px solid var(--sand);
  --rule-gold: 1px solid var(--gold);

  /* ---------- Deckled-paper clip paths ---------- */
  --clip-mat: polygon(
    0% 0%, 14.29% 0%, 28.57% 0.66%, 42.86% 0%, 57.14% 0.16%, 71.43% 0%, 85.71% 0%, 100% 0.03%,
    97.96% 14.29%, 99.71% 28.57%, 98.11% 42.86%, 98.2% 57.14%, 99.67% 71.43%, 100% 85.71%, 98.34% 100%,
    85.71% 98.78%, 71.43% 100%, 57.14% 100%, 42.86% 100%, 28.57% 99.55%, 14.29% 100%, 0% 98.0%,
    1.58% 85.71%, 0% 71.43%, 0% 57.14%, 0% 42.86%, 0% 28.57%, 1.39% 14.29%
  );
  --clip-img: polygon(
    0% 0%, 14.29% 0.23%, 28.57% 0.39%, 42.86% 0%, 57.14% 0.13%, 71.43% 0%, 85.71% 0%, 100% 0%,
    100% 14.29%, 99.8% 28.57%, 99.48% 42.86%, 100% 57.14%, 99.87% 71.43%, 99.44% 85.71%, 100% 100%,
    85.71% 100%, 71.43% 99.28%, 57.14% 100%, 42.86% 100%, 28.57% 100%, 14.29% 100%, 0% 99.41%,
    1.34% 85.71%, 0% 71.43%, 0% 57.14%, 0.72% 42.86%, 0% 28.57%, 0% 14.29%
  );

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --reveal-duration: 900ms;
  --reveal-distance: 18px;
}