/* ==========================================================================
   Costa Serena Cruise · Design System
   Colors + Typography Foundation
   Brand: 온국민크루즈진흥원 (Korea Cruise Tourism)
   Product: 코스타 세레나 크루즈 랜딩페이지
   ========================================================================== */

/* ---------- Webfonts ---------- */
/* Pretendard: Korean-optimized modern sans (primary UI + body) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Cormorant Garamond: elegant serif (headings accents, "Reserve Your Voyage") */
/* Great Vibes: script eyebrow ("Costa Serena · 2026") */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Great+Vibes&display=swap");

:root {
  /* ============ COLOR — BRAND ============ */
  /* Navy — primary brand. deep, trustworthy, oceanic */
  --navy-900: #001B4D;   /* headings, buttons, primary surface-dark */
  --navy-800: #062561;
  --navy-700: #0D3182;   /* hover-primary */
  --navy-500: #1A73E8;   /* link accent (rare) */

  /* Gold — luxury accent. serif + gradient CTA */
  --gold-900: #8B6914;   /* deep gold, small type */
  --gold-700: #B38728;   /* serif accent labels */
  --gold-500: #D4AF37;   /* mid gold */
  --gold-300: #E8C960;   /* light gold, on-dark text */
  --gold-100: #FCF6BA;   /* pale gold, highlights */

  /* Red — urgency + Korean flag accent */
  --red-brand: #C62828;
  --red-accent: #E63946;

  /* Kakao — messenger CTA (Korean market must-have) */
  --kakao: #FEE500;
  --kakao-dark: #3C1E1E;

  /* ============ COLOR — NEUTRALS (INK & SURFACES) ============ */
  --ink: #0D1830;        /* body copy */
  --ink-2: #2a3352;      /* secondary text */
  --ink-3: #5a627a;      /* tertiary / meta */
  --ink-4: #8a92a8;      /* placeholder / disabled */
  --line: #dfe3ed;       /* dividers, input borders */
  --surface: #ffffff;
  --surface-alt: #f7f8fc;
  --surface-cream: #FBF8F0; /* warm luxury tint */

  /* ============ COLOR — SEMANTIC ============ */
  --success: #12b981;
  --warning: #B38728;    /* gold-700 doubles as warning */
  --danger: var(--red-brand);
  --info: var(--navy-500);

  /* ============ GRADIENTS ============ */
  --gold-grad: linear-gradient(135deg, #B38728 0%, #D4AF37 25%, #FCF6BA 50%, #D4AF37 75%, #8B6914 100%);
  --navy-grad: linear-gradient(180deg, #062561 0%, #001B4D 100%);
  --map-sea-grad: linear-gradient(180deg, #0A2951 0%, #05193A 100%);
  --hero-overlay: linear-gradient(180deg, rgba(0,27,77,.75) 0%, rgba(0,27,77,.55) 30%, rgba(0,27,77,.8) 75%, rgba(0,27,77,.98) 100%);

  /* ============ SHADOWS ============ */
  --shadow-sm: 0 2px 8px -2px rgba(0,27,77,.10);
  --shadow-md: 0 8px 24px -8px rgba(0,27,77,.18);
  --shadow-lg: 0 24px 60px -20px rgba(0,27,77,.35);
  --shadow-xl: 0 30px 80px -20px rgba(0,27,77,.50);
  --shadow-gold: 0 12px 32px -12px rgba(179,135,40,.6);

  /* ============ RADIUS ============ */
  --r-xs: 4px;    /* stamps, tags */
  --r-sm: 6px;    /* quick buttons */
  --r-md: 8px;    /* form fields, primary buttons */
  --r-lg: 10px;   /* hooks */
  --r-xl: 14px;   /* icon tiles */
  --r-2xl: 16px;  /* form card */
  --r-3xl: 24px;  /* map container */
  --r-pill: 999px;

  /* ============ SPACING SCALE (8pt 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: 100px;   /* section vertical padding */

  /* ============ LAYOUT ============ */
  --container: 1200px;
  --nav-h: 72px;

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s;
  --dur-std: .2s;
  --dur-slow: .3s;

  /* ============ TYPE — FAMILIES ============ */
  --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Nanum Myeongjo', serif;
  --font-script: 'Great Vibes', cursive;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ============ TYPE — WEIGHTS ============ */
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-extra: 800;
  --w-black: 900;

  /* ============ TYPE — SEMANTIC SIZES ============ */
  /* Hero display */
  --t-display: clamp(38px, 5.6vw, 68px);  /* Hero H1 */
  --t-section-title: clamp(30px, 3.8vw, 46px); /* Section titles */
  --t-h1: 46px;
  --t-h2: 32px;
  --t-h3: 23px;
  --t-h4: 18px;

  --t-body-lg: 18px;
  --t-body: 16px;
  --t-body-sm: 15px;
  --t-caption: 13px;
  --t-meta: 12px;
  --t-micro: 11px;

  --t-script-lg: 36px; /* hero eyebrow */
  --t-script-md: 30px; /* section eyebrow */
  --t-script-sm: 20px; /* form eyebrow */

  --t-serif-num: 42px; /* italic serif card numbers */
  --t-serif-label: 10px; /* uppercase serif micro */

  /* ============ LETTER SPACING ============ */
  --ls-display: -0.035em;
  --ls-title: -0.03em;
  --ls-tight: -0.02em;
  --ls-body: -0.005em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.04em;
  --ls-widest: 0.22em; /* serif eyebrow, uppercase */

  /* ============ LINE HEIGHT ============ */
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.65;
  --lh-relaxed: 1.75;
}

/* ==========================================================================
   Base — element-level type defaults
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-kr);
  color: var(--ink);
  background: var(--surface);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
}

/* -- headings -- */
h1, .h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--navy-900);
  margin: 0;
  text-wrap: pretty;
}
h2, .h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-extra);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  color: var(--navy-900);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-extra);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--navy-900);
  margin: 0;
}
h4, .h4 {
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--navy-900);
  margin: 0;
}
p { line-height: var(--lh-relaxed); margin: 0; }
small { font-size: var(--t-caption); color: var(--ink-3); }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Utility text styles — reusable classes matching brand's motifs
   ========================================================================== */

.t-script {
  font-family: var(--font-script);
  color: var(--gold-700);
  font-size: var(--t-script-md);
  line-height: 1;
}
.t-script--hero { font-size: var(--t-script-lg); color: var(--gold-300); }
.t-script--small { font-size: var(--t-script-sm); }

.t-serif-eyebrow {
  font-family: var(--font-serif);
  font-size: var(--t-serif-label);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: var(--w-semi);
}

.t-serif-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-serif-num);
  color: var(--gold-500);
  font-weight: var(--w-medium);
  opacity: .7;
  line-height: 1;
}

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Countdown / date — serif with feature-numeric */
.t-numeric-serif {
  font-family: var(--font-serif);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}