/* ==========================================================================
   Tripsy Design Tokens
   Single source of truth for colors, typography, spacing, radii, shadows.
   Import this file anywhere you need the Tripsy look.
   ========================================================================== */

:root {
  /* ---------- Brand colors ---------- */
  /* Teal is the primary — it's the logo color, the "Iris" color, the CTA color. */
  --tripsy-teal:         #59BDB9;
  --tripsy-teal-dark:    #4AA3A0;
  --tripsy-teal-deep:    #3E8B89;  /* for text on cream, AA on #F7F3F0 */
  --tripsy-teal-soft:    #EAF7F6;  /* bubble/chip backgrounds */

  /* Coral — secondary warmth. Used for "Advisory/Coach" moments + accents. */
  --tripsy-coral:        #E8A174;
  --tripsy-coral-dark:   #D4905F;
  --tripsy-coral-soft:   #FBEFEC;

  /* Cream — the warm off-white behind most marketing pages. Signature tone. */
  --tripsy-cream:        #EEE1D3;  /* deeper cream, used as panel fill */
  --tripsy-bg:           #F7F3F0;  /* page background (lighter cream) */
  --tripsy-light:        #F7F3F0;  /* alias */

  /* Purple — tertiary; associated with City Planner + Iris magic moments. */
  --tripsy-purple:       #7E678B;
  --tripsy-purple-soft:  #F1ECF6;

  /* Yellow — small accent, use sparingly (highlights, star ratings, badges). */
  --tripsy-yellow:       #FADF7B;

  /* ---------- Neutrals ---------- */
  --tripsy-ink:          #1d1d1f;  /* near-black for primary text */
  --tripsy-gray-900:     #1d1d1f;
  --tripsy-gray-700:     #3f3f45;
  --tripsy-gray-500:     #6e6e73;  /* body copy on white */
  --tripsy-gray-400:     #9a9aa0;
  --tripsy-gray-300:     #c9c9ce;
  --tripsy-gray-200:     #e5e5e8;
  --tripsy-gray-100:     #f2f2f4;
  --tripsy-white:        #ffffff;
  --tripsy-hairline:     rgba(0,0,0,0.08);

  /* ---------- Semantic tokens ---------- */
  --tripsy-text:         var(--tripsy-ink);
  --tripsy-text-muted:   var(--tripsy-gray-500);
  --tripsy-text-subtle:  var(--tripsy-gray-400);
  --tripsy-text-onTeal:  #ffffff;
  --tripsy-surface:      #ffffff;
  --tripsy-surface-warm: var(--tripsy-bg);
  --tripsy-surface-deep: var(--tripsy-cream);
  --tripsy-border:       rgba(0,0,0,0.08);
  --tripsy-border-strong:rgba(0,0,0,0.16);
  --tripsy-link:         var(--tripsy-teal-deep);
  --tripsy-success:      #3E8B6C;
  --tripsy-warn:         #D99A2B;
  --tripsy-danger:       #C64545;

  /* ---------- Type scale (marketing/web) ---------- */
  --font-heading:  'Playfair Display', 'Source Serif Pro', Georgia, serif;
  --font-body:     'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:   'Caveat', 'Dancing Script', cursive; /* mirrors the logo wordmark */

  /* Display & headings — Playfair Display, 1.08 line-height for tight editorial feel */
  --fs-display-xl: clamp(48px, 7vw, 96px);   /* hero titles */
  --fs-display-lg: clamp(40px, 5.5vw, 72px);
  --fs-display:    clamp(32px, 4.2vw, 56px);
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-h5:         18px;

  /* Body — Montserrat, 1.5 line-height */
  --fs-lead:       20px;  /* intro paragraphs under titles */
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  --lh-tight:      1.08;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  /* Weight vocabulary — Playfair shines at 400/500; we bold-emphasize *inside* serif headings rather than leaning on 700 globally */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Tracking — serif display is tighter than body */
  --ls-display:    -0.01em;
  --ls-body:        0;
  --ls-eyebrow:     0.08em;

  /* ---------- Spacing (4px base, compressed scale) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- Radii ----------
     The Tripsy product uses dramatic rounding — 30px+ on buttons & inputs
     (pill-shaped), 32px on image cards, and a 40px top-rounded "reveal" edge
     on every screen where content sits over the teal app-bar. */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;   /* cards */
  --r-2xl:  32px;   /* image cards */
  --r-3xl:  40px;   /* screen reveal edge / large surfaces */
  --r-pill: 999px;  /* buttons, inputs, chips */

  /* ---------- Shadows ---------- */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:  0 2px 6px rgba(0,0,0,0.06);
  --sh-md:  0 6px 16px rgba(0,0,0,0.08);
  --sh-lg:  0 12px 32px rgba(0,0,0,0.10);
  --sh-xl:  0 24px 56px rgba(0,0,0,0.12);
  --sh-card: 0 6px 18px rgba(0,0,0,0.08);   /* image cards */
  --sh-float: 0 12px 28px rgba(0,0,0,0.10); /* floating CTAs */
  --sh-teal-glow: 0 0 40px rgba(89,189,185,0.35), 0 0 80px rgba(89,189,185,0.18);

  /* ---------- Signature gradients ---------- */
  --grad-hero-warm: radial-gradient(ellipse at 30% 0%, rgba(89,189,185,0.18) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 0%, rgba(232,161,116,0.14) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 100%, rgba(232,161,116,0.08) 0%, transparent 40%),
                    var(--tripsy-bg);
  --grad-hero-dark: radial-gradient(ellipse at 30% 0%, rgba(89,189,185,0.22) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 0%, rgba(232,161,116,0.15) 0%, transparent 50%),
                    #0b0b0d;
  --grad-iris-chip: linear-gradient(135deg, #59BDB9 0%, #4AA3A0 100%);
  --grad-coach-chip: linear-gradient(135deg, #E8A174 0%, #D4905F 100%);
  --grad-planner-chip: linear-gradient(135deg, #7E678B 0%, #62516E 100%);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      160ms;
  --dur-base:      240ms;
  --dur-slow:      420ms;

  /* ---------- Grid / containers ---------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1360px;
}

/* ---------- Base resets that Tripsy pages all share ---------- */
html, body {
  font-family: var(--font-body);
  color: var(--tripsy-text);
  background: var(--tripsy-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Playfair for titles, always */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--tripsy-ink);
  margin: 0;
}

p { margin: 0; }

/* Utility: a subtle underline that matches how Tripsy highlights words inside serif titles */
.tripsy-underline {
  background-image: linear-gradient(transparent 72%, rgba(89,189,185,0.35) 72%);
  background-repeat: no-repeat;
  padding: 0 2px;
}

/* Utility: eyebrow label — uppercase Montserrat with tracking, sits above headings */
.tripsy-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--tripsy-teal-deep);
}