/* ============================================================
   Taste of Tulum — Foundations (color + type tokens)
   Warm parchment · deep teal ink · festival gold + marigold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,600&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Dancing+Script:wght@600;700&display=swap');

:root{
  /* ---- Paper / surfaces ---- */
  --tt-paper:       #f4ead4;   /* page background, aged cream */
  --tt-paper-2:     #ecdfc1;   /* alt section, deeper parchment */
  --tt-paper-edge:  #e2d2ad;   /* hairline on paper */
  --tt-card:        #fbf5e6;   /* raised cards */

  /* ---- Ink ---- */
  --tt-ink:         #11302a;   /* headings, deep teal-green */
  --tt-ink-soft:    #4d5d52;   /* body copy */
  --tt-ink-faint:   #7d8a7c;   /* captions */

  /* ---- Metals / festival accents ---- */
  --tt-gold:        #c08a2e;   /* primary gold */
  --tt-gold-deep:   #9c6e1f;
  --tt-gold-bright: #e3c071;   /* highlight gold */
  --tt-red:         #b23226;   /* festive red */
  --tt-orange:      #d4772a;   /* marigold orange */
  --tt-magenta:     #9c3b6e;   /* cosmos pink */
  --tt-teal:        #1d6b5e;   /* embroidery green */

  /* ---- Effects ---- */
  --tt-shadow-1: 0 1px 2px rgba(17,48,42,.08);
  --tt-shadow-2: 0 10px 30px rgba(17,48,42,.14);
  --tt-shadow-3: 0 24px 60px rgba(17,48,42,.20);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;
  --font-script:  'Dancing Script', cursive;

  /* radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* legacy aliases referenced by inline svg fills in the html */
  --tt-ink-color: var(--tt-ink);
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tt-ink-soft);
  background:
    radial-gradient(120% 80% at 50% -10%, #f8efda 0%, var(--tt-paper) 55%) fixed,
    var(--tt-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--tt-ink);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -.01em;
}

p{ margin: 0 0 1em; text-wrap: pretty; }

a{ color: inherit; text-decoration: none; }

img{ display: block; max-width: 100%; }

::selection{ background: var(--tt-gold-bright); color: var(--tt-ink); }