/* ============================================================
   HeartEase International Travel — Foundations
   Colors + Type tokens
   ============================================================ */

/* ---------- Brand fonts (real) ----------
   Cormorant Garamond Italic — italic display emphasis.
   Noto Serif SC — Chinese serif display + body.
   Inter — sans family for body, UI, eyebrows, wordmark. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/NotoSerifSC-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/NotoSerifSC-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Webfonts — Google Fonts substitutions (see README "Fonts").
   Display script approximates the "Travel with Heart" tagline lettering.
   Cormorant Garamond upright complements the brand italic file. */
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap");

:root {
  /* ---------- Brand palette ---------- */
  --brand-navy:        #1A3E6E;   /* logo navy, primary brand */
  --brand-navy-deep:   #021D42;   /* hero atmosphere */
  --brand-navy-ink:    #0C2752;   /* heavy text on light */
  --brand-red:         #D31515;   /* logo red, accent */
  --brand-red-bright:  #E63946;   /* hover / highlight */
  --brand-red-deep:    #A30E0E;   /* pressed */
  --brand-sunset:      #C05B62;   /* warm dusk accent */
  --brand-gold:        #E6B655;   /* lantern / pagoda warm */

  /* ---------- Neutrals (warm, parchment-leaning) ---------- */
  --parchment:         #F7F2E9;   /* page background, warm */
  --parchment-soft:    #FAF7F0;
  --parchment-deep:    #ECE3D1;
  --paper:             #FFFFFF;
  --ink:               #15264A;   /* primary text on light */
  --ink-soft:          #3A4A6B;   /* secondary text */
  --ink-mute:          #6B7790;   /* tertiary / meta */
  --rule:              #D9DCE3;   /* hairlines, dividers */
  --rule-soft:         #ECEEF2;

  /* ---------- Semantic foreground / background ---------- */
  --fg1: var(--ink);
  --fg2: var(--ink-soft);
  --fg3: var(--ink-mute);
  --fg-inverse: #FFFFFF;
  --fg-on-navy: #F7F2E9;
  --fg-on-navy-mute: rgba(247,242,233,0.68);

  --bg1: var(--parchment);
  --bg2: var(--parchment-soft);
  --bg3: var(--paper);
  --bg-navy: var(--brand-navy);
  --bg-navy-deep: var(--brand-navy-deep);

  /* ---------- Accent semantics ---------- */
  --accent: var(--brand-red);
  --accent-fg: #FFFFFF;
  --link: var(--brand-navy);
  --link-hover: var(--brand-red);

  /* ---------- Type families ---------- */
  --font-script: "Allura", "Snell Roundhand", cursive;          /* tagline flourish */
  --font-display: "Cormorant Garamond", "Playfair Display", "Noto Serif SC", Georgia, serif;
  --font-display-italic: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", "Manrope", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans-cn: "Noto Sans SC", "Inter", system-ui, sans-serif;
  --font-serif-cn: "Noto Serif SC", "Playfair Display", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (display → micro) ---------- */
  --fs-hero: clamp(56px, 9vw, 128px);
  --fs-display: clamp(40px, 5.5vw, 72px);
  --fs-h1: clamp(32px, 3.6vw, 48px);
  --fs-h2: clamp(26px, 2.6vw, 34px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --fs-eyebrow: 12px;

  /* ---------- Weights ---------- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* ---------- Tracking / line height ---------- */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.005em;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.22em;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-relaxed: 1.7;

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

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-stamp: 2px;     /* passport stamp / ticket edges */

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(2,29,66,0.06);
  --shadow-sm: 0 2px 8px rgba(2,29,66,0.08);
  --shadow-md: 0 8px 24px rgba(2,29,66,0.10);
  --shadow-lg: 0 18px 48px rgba(2,29,66,0.14);
  --shadow-hero: 0 30px 80px rgba(2,29,66,0.32);
  --shadow-inset: inset 0 0 0 1px rgba(2,29,66,0.06);
  --shadow-stamp: 0 0 0 2px var(--brand-red), 0 0 0 3px var(--paper);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   Semantic element styles — drop-in defaults
   ============================================================ */

html, body {
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero-script {
  font-family: var(--font-script);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fg-on-navy);
}
.hero-script em {
  font-style: normal;
  color: var(--brand-red-bright);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--w-semibold);
  line-height: 1.3;
  color: var(--fg1);
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.small  { font-size: var(--fs-small); color: var(--fg3); }
.micro  { font-size: var(--fs-micro); color: var(--fg3); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-red);
}

.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--rule); }