/* =============================================================
   STAYFORLONG DESIGN SYSTEM — TOKENS
   Travel Canvas UI · Light theme (default)
   ============================================================= */

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

/* HK Grotesk is the brand typeface. Montserrat is the official fallback
   when HK Grotesk is unavailable — load Montserrat from Google Fonts so
   the system never falls all the way through to Arial. If you have HK
   Grotesk licensed, drop the .woff2 files into fonts/ and uncomment the
   @font-face block below. */

/*
@font-face {
  font-family: 'HK Grotesk';
  src: url('fonts/HKGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('fonts/HKGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  /* ---------- BRAND — SFL (Magenta-Pink) ---------- */
  --sfl-50: #fee7ef;
  --sfl-100: #fdcfdf;
  --sfl-light: #fa6e9f;
  --sfl-500: #f60e5f; /* core */
  --sfl: #f60e5f;
  --sfl-dark: #940839;
  --sfl-900: #4a041d;

  /* ---------- BRAND — SFL 2.0 (Electric Violet, Prime) ---------- */
  --sfl2-50: #f8f4ff;
  --sfl2-100: #eae0fb;
  --sfl2-light: #d2b8fc;
  --sfl2-500: #6911f5; /* core */
  --sfl2: #6911f5;
  --sfl2-dark: #560cca;
  --sfl2-900: #252525;

  /* ---------- SFL BASE — warm sand ---------- */
  --sand-50: #fcfbfa;
  --sand-100: #faf8f5;
  --sand-300: #eeebe6;
  --sand-500: #e4dccf; /* core sand */
  --sand: #e4dccf;
  --sand-700: #aca290;
  --sand-900: #837661;

  /* ---------- NEUTRALS ---------- */
  --white: #fff;
  --snow: #fafafa;
  --mist: #f2f2f2;
  --silver: #e0e0e0;
  --pewter: #a8a8a8;
  --warm-gray: #aaa;
  --slate: #666;
  --mid-gray: #555;
  --graphite: #444;
  --charcoal: #333;
  --onyx-light: #2a2a2a;
  --onyx: #1e1e1e;
  --deep-onyx: #222;
  --obsidian-mist: #1a1a1a;
  --black: #000;
  --void-light: #161616;
  --void: #111;

  /* ---------- FEEDBACK — SUCCESS ---------- */
  --success-50: #eaf8f0;
  --success-100: #d5f1e1;
  --success-300: #80d4a4;
  --success-500: #2cb767;
  --success-700: #1a6e3e;
  --success-900: #0d371f;
  --success-950: #0d2a1a;

  /* ---------- FEEDBACK — ERROR ---------- */
  --error-50: #f9eaea;
  --error-100: #f4d5d5;
  --error-300: #dd8181;
  --error-500: #c72d2d;
  --error-700: #771b1b;
  --error-900: #3c0e0e;
  --error-950: #2a0f0f;

  /* ---------- FEEDBACK — WARNING ---------- */
  --warning-50: #fdfaeb;
  --warning-100: #fcf4d7;
  --warning-300: #f5de88;
  --warning-500: #efc839;
  --warning-700: #8f7822;
  --warning-900: #483c11;
  --warning-950: #2a2200;

  /* ---------- FEEDBACK — INFO ---------- */
  --info-50: #edf0fa;
  --info-100: #dbe1f5;
  --info-300: #92a4e0;
  --info-400: #0078cc; /* link on light */
  --info-500: #4967cb;
  --info-700: #2c3e7a;
  --info-900: #161f3d;
  --info-950: #0d1229;

  /* ---------- SPECIAL ---------- */
  --focus-ring: #da9a35; /* Harvest Gold */
  --link-on-light: #0078cc;
  --link-hover-on-light: #2c3e7a;
  --trustpilot-green: #04da8d;
  --deposit-bg: #fee7ef; /* SFL rate background */

  /* ---------- SEMANTIC TOKENS ---------- */
  --color-primary: var(--sfl-500);
  --color-primary-hover: var(--sfl-dark);
  --color-primary-pressed: var(--sfl-900);
  --color-primary-disabled: var(--silver);
  --color-on-primary: var(--white);
  --color-secondary-bg: var(--white);
  --color-secondary-border: var(--sfl-500);
  --color-secondary-text: var(--sfl-500);
  --color-surface-page: var(--white);
  --color-surface-page-serp: var(--mist);
  --color-surface-card: var(--white);
  --color-surface-elevated: var(--snow);
  --color-surface-sand: var(--sand-500);
  --color-surface-sand-soft: var(--sand-100);
  --color-surface-sand-mid: var(--sand-300);
  --color-surface-dark: var(--charcoal);
  --color-text-primary: var(--charcoal);
  --color-text-secondary: var(--slate);
  --color-text-tertiary: var(--pewter);
  --color-text-inverse: var(--white);
  --color-text-brand: var(--sfl-500);
  --color-border-default: var(--silver);
  --color-border-strong: var(--charcoal);
  --color-border-focus: var(--sfl2-500);
  --color-overlay-backdrop: rgb(0 0 0 / 38%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'HK Grotesk', 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Playfair Display', 'Libre Baskerville', 'Lora', Georgia, serif;

  /* ---------- TYPE WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- TYPE SIZES — TITLES ---------- */
  --text-h1: 56px;
  --text-h2: 48px;
  --text-h3: 40px;
  --text-h4: 32px;
  --text-h5: 24px;
  --text-h6: 20px;

  /* ---------- TYPE SIZES — BODY ---------- */
  --text-body-xl: 18px;
  --text-body-l: 16px;
  --text-body-m: 14px;
  --text-body-s: 12px;

  /* ---------- TYPE SIZES — CAPTIONS ---------- */
  --text-caption-l: 14px;
  --text-caption-m: 12px;
  --text-caption-s: 10px;
  --tracking-caption-l: 0.2px;
  --tracking-caption-m: 0.5px;
  --tracking-caption-s: 0.8px;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-tight: 1.25;

  /* ---------- SPACING (4px base) ---------- */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* ---------- RADII ---------- */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-32: 32px;
  --radius-pill: 500px;

  /* ---------- BORDER WIDTHS ---------- */
  --bw-1: 1px;
  --bw-1-5: 1.5px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* ---------- ELEVATION (used sparingly) ---------- */
  --shadow-sheet: 0 -2px 6px 2px rgb(0 0 0 / 15%);
  --shadow-tag: 0 1px 2px rgb(0 0 0 / 15%);

  /* ---------- MOTION ---------- */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 400ms;
  --duration-deliberate: 600ms;
  --ease-linear: cubic-bezier(0, 0, 1, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- BREAKPOINTS (reference values) ---------- */
  --bp-mobile-m: 375px;
  --bp-mobile-l: 414px;
  --bp-tablet: 768px;
  --bp-desktop: 1440px;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */

html,
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-l);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: var(--lh-heading);
  color: var(--color-text-primary);
  margin: 0;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

h4 {
  font-size: var(--text-h4);
}

h5 {
  font-size: var(--text-h5);
}

h6 {
  font-size: var(--text-h6);
}

p {
  margin: 0;
}

a {
  color: var(--link-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--link-hover-on-light);
}

/* Caption helpers */
.caption-l {
  font-size: var(--text-caption-l);
  letter-spacing: var(--tracking-caption-l);
  font-weight: var(--fw-medium);
}

.caption-m {
  font-size: var(--text-caption-m);
  letter-spacing: var(--tracking-caption-m);
  font-weight: var(--fw-medium);
}

.caption-s {
  font-size: var(--text-caption-s);
  letter-spacing: var(--tracking-caption-s);
  font-weight: var(--fw-medium);
}

/* Display (editorial only — never in product UI) */
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
}

/* Buttons (tokenized base) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-body-m);
  border: none;
  border-radius: var(--radius-pill);
  padding-block: 12px;
  padding-inline: 20px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-primary:active {
  background: var(--color-primary-pressed);
}

.btn-primary:disabled {
  background: var(--color-primary-disabled);
  color: var(--white);
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: var(--color-secondary-bg);
  color: var(--color-secondary-text);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-body-m);
  border: 2px solid var(--color-secondary-border);
  border-radius: var(--radius-pill);
  padding-block: 10px;
  padding-inline: 18px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.btn-secondary:hover {
  background: var(--sfl-50);
}

/* Card base */
.card {
  background: var(--color-surface-card);
  border: var(--bw-2) solid var(--color-border-default);
  border-radius: var(--radius-8);
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.card:hover {
  background: var(--color-surface-sand-soft);
}

.card.is-selected {
  border-color: var(--color-border-strong);
}

/* Inputs */
.input {
  background: var(--white);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-l);
  border: var(--bw-2) solid var(--color-border-default);
  border-radius: var(--radius-8);
  padding-block: 12px;
  padding-inline: 16px;
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.input::placeholder {
  color: var(--slate);
}

.input:hover {
  border-color: var(--slate);
}

.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgb(218 154 53 / 40%);
}

.input.is-error {
  border-color: var(--error-500);
}

.input:disabled {
  background: var(--mist);
  cursor: not-allowed;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}