/* =============================================================
   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;
  }
}