/* Juliette Loren — design tokens (the values the pages actually use).
   In Framer: make each colour a Color Style / Variable with the same name.
   In Lovable: put these in index.css under :root and map them in tailwind.config. */
@font-face{font-family:"True Fate Serif";src:url(fonts/TrueFateSerif.ttf) format("truetype");font-display:swap}
@font-face{font-family:"True Fate Script";src:url(fonts/TrueFateScript.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Tomatoes";src:url(fonts/Tomatoes.ttf) format("truetype");font-display:swap}
:root{
  /* Light grounds (65–70% of the site) */
  --pearl-ivory:#F9F7F6;   /* page background */
  --soft-pearl:#FBF9F8;    /* paper sheets */
  --pearl-paper:#FBF8F7;   /* letters, cards */
  --cool-pearl:#F6F2F1;    /* form fields */
  /* Pink + celadon fields (15–20%) */
  --rose-veil:#F6EEF0;
  --blush-paper:#F4E3E5;
  --ballet-pink:#EBCBD0;
  --celadon:#EEF1EA;
  /* Wine (10–15%) */
  --velvet-wine:#5A0F1D;   /* brand, Write to Juliette button, headlines */
  --burgundy-rose:#7A2B3A; /* hover, eyebrows */
  --oxblood:#3B0A13;
  --love-letter-red:#9E1B2A; /* handwriting, hearts, link hover — under 1% */
  --mauve-script:#A55A6A;  /* True Fate Script colour */
  --antique-gilt:#A88B5C;  /* thin card frames only */
  /* Text */
  --ink-text:#241A1B;      /* body text */
  --cocoa-text:#4A3631;    /* secondary text, hints */
  --hairline:rgba(90,15,29,.14);
  /* Type families */
  --font-display:"True Fate Serif",Didot,Georgia,serif;
  --font-script:"True Fate Script",cursive;
  --font-hand:"Tomatoes",cursive;
  --font-body:"Newsreader",Georgia,serif;
  --font-ui:"Instrument Sans",system-ui,sans-serif;
  /* Spacing + shape */
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px;--space-6:120px;
  --gutter-desktop:56px;--gutter-mobile:16px;
  --radius:0;
  --shadow-print:0 1px 2px rgba(27,20,20,.18),0 8px 18px rgba(27,20,20,.14);
}

/* Banner: base + wish-list cities */
.jl .tour-banner .tour-next{display:inline-block;margin-left:14px;padding-left:14px;border-left:1px solid #C99AA5;font-weight:500;font-size:.86em;letter-spacing:.03em;color:#7A2B3A;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.jl .tour-banner .tour-next:hover{color:#9E1B2A}
@container jl (max-width: 760px){.jl .tour-banner .tour-next{display:block;margin:6px 0 0;padding:0;border:0}}
/* small polish: balanced headings, steady numbers, a little give on press */
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
.btn,.qi-send,.qi-say,.qi-open,.fa-copy{transition-property:transform,background-color;transition-duration:.12s}
.btn:active,.qi-send:active,.qi-open:active,.fa-copy:active{transform:scale(.96)}
dd,.rate,.qi-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.btn:active,.qi-send:active,.qi-open:active,.fa-copy:active{transform:none}}
@container jl (max-width: 760px){.jl .tour-banner strong{display:block;margin-bottom:2px}.jl .tour-banner .tb-dash{display:none}}