/* VacayMatch design tokens (brand US, "Shemesh"). Same values and the same --mf-* names as the Hebrew kit
   (design/brand-v2/final/tokens.css), so one stylesheet serves both brands; only the base direction differs (ltr).
   Light theme is the default; the dark theme applies with prefers-color-scheme: dark (unless data-theme="light")
   or with data-theme="dark" on <html>. Raw palette values mirror palette.json: change them there (tools/gen.js) first.
   Three brand colours only: Sun, Ink, White. Coral is a UI accent for shapes, never for the logo or the mascot.
   Sun is a surface and display colour: it has 1.5:1 on white, so it is never text on a light background. */

:root {
  /* raw palette */
  --mf-sun: #FFC532;
  --mf-ink: #23233F;
  --mf-white: #FFFFFF;
  --mf-coral: #FF6B57;
  --mf-whatsapp: #25D366;
  --mf-ink-2: #2E2E52;              /* dark-theme raised surface, one step up from Ink */
  --mf-ink-soft: #B9B9D2;           /* muted text on Ink: 7.9:1 */
  --mf-mist: #F3F3F8;               /* light-theme alternate surface: Ink on it 13.7:1 */
  --mf-ink-muted: #5A5A78;          /* muted text on white 6.6:1, on mist 6.0:1 */
  --mf-sun-deep: #B8860B;           /* sun for thin lines and icons on white only (3.3:1); never for text */
  --mf-coral-deep: #C7442E;         /* coral as text on white (4.9:1); the raw coral is 2.8:1 and is shapes only */

  /* surfaces */
  --mf-bg: var(--mf-white);
  --mf-bg-alt: var(--mf-mist);
  --mf-surface: var(--mf-white);
  --mf-surface-raised: var(--mf-white);
  --mf-hero-bg: var(--mf-ink);      /* the image-template block: Ink on both themes */
  --mf-hero-text: var(--mf-white);
  --mf-hero-accent: var(--mf-sun);

  /* text */
  --mf-text: var(--mf-ink);
  --mf-text-strong: var(--mf-ink);
  --mf-text-muted: var(--mf-ink-muted);
  --mf-text-inverse: var(--mf-white);

  /* brand and accent */
  --mf-brand: var(--mf-sun);        /* the sun: badges, chips, highlights (always with Ink text, 9.6:1) */
  --mf-on-brand: var(--mf-ink);
  --mf-brand-strong: var(--mf-ink);
  --mf-accent: var(--mf-coral);     /* shapes and tags only: price-drop markers, deal dots */
  --mf-accent-text: var(--mf-coral-deep);
  --mf-price: var(--mf-ink);

  /* interactive */
  --mf-link: var(--mf-ink);
  --mf-link-hover: var(--mf-ink-2);
  --mf-link-decoration: var(--mf-sun); /* links are Ink underlined in Sun: the colour marks, the ink reads */
  --mf-focus-ring: var(--mf-sun);
  --mf-border: #E6E6EE;
  --mf-border-strong: #B9B9D2;

  /* the one WhatsApp colour, used for the CTA only */
  --mf-cta-bg: var(--mf-whatsapp);
  --mf-cta-bg-hover: #20C45C;
  --mf-cta-text: var(--mf-ink);     /* 7.7:1; WhatsApp's own white-on-green is 2.0:1 */

  /* the mascot's picture is fixed in both themes */
  --mf-mark-sun: var(--mf-sun);
  --mf-mark-ink: var(--mf-ink);
  --mf-mark-glint: var(--mf-white);

  /* type */
  --mf-font-display: 'Rubik', 'Heebo', 'Noto Sans Hebrew', Arial, sans-serif;
  --mf-font-body: 'Heebo', 'Rubik', 'Noto Sans Hebrew', Arial, sans-serif;
  --mf-weight-wordmark: 800;        /* never retype the wordmark; use the SVGs */
  --mf-weight-display: 800;
  --mf-weight-button: 700;
  --mf-weight-label: 600;
  --mf-weight-body: 400;
  --mf-text-xs: 0.8125rem;          /* 13 px: captions only, never below 14 px for running text */
  --mf-text-sm: 0.875rem;           /* 14 px */
  --mf-text-base: 1.0625rem;        /* 17 px body */
  --mf-text-lg: 1.25rem;            /* 20 px: H3, lead paragraphs */
  --mf-text-xl: 1.5rem;             /* 24 px: H2 mobile */
  --mf-text-2xl: 1.875rem;          /* 30 px: H1 mobile, H2 desktop */
  --mf-text-3xl: 2.75rem;           /* 44 px: H1 desktop */
  --mf-leading-display: 1.1;
  --mf-leading-body: 1.55;

  /* shape and space: round, like the disc and the rays */
  --mf-radius-sm: 8px;
  --mf-radius: 14px;
  --mf-radius-lg: 28px;             /* cards and photo frames: the template's hero corner */
  --mf-radius-pill: 999px;
  --mf-space-1: 4px;
  --mf-space-2: 8px;
  --mf-space-3: 12px;
  --mf-space-4: 16px;
  --mf-space-5: 24px;
  --mf-space-6: 32px;
  --mf-space-7: 48px;
  --mf-space-8: 64px;
  --mf-shadow: 0 8px 24px rgba(35, 35, 63, 0.12);
  --mf-shadow-raised: 0 16px 40px rgba(35, 35, 63, 0.18);

  color-scheme: light dark;
}

/* dark theme: Ink page, white text, Sun for brand, prices and links (Ink has no contrast on Ink) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mf-bg: var(--mf-ink);
    --mf-bg-alt: var(--mf-ink-2);
    --mf-surface: var(--mf-ink-2);
    --mf-surface-raised: #393964;
    --mf-text: var(--mf-white);
    --mf-text-strong: var(--mf-white);
    --mf-text-muted: var(--mf-ink-soft);
    --mf-text-inverse: var(--mf-ink);
    --mf-brand-strong: var(--mf-sun);
    --mf-accent-text: #FF8A78;        /* 6.0:1 on Ink */
    --mf-price: var(--mf-sun);        /* 9.6:1 on Ink, 8.2:1 on Ink-2 */
    --mf-link: var(--mf-sun);
    --mf-link-hover: #FFD466;
    --mf-link-decoration: var(--mf-sun);
    --mf-border: rgba(255, 255, 255, 0.14);
    --mf-border-strong: rgba(255, 255, 255, 0.30);
    --mf-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --mf-shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --mf-bg: var(--mf-ink);
  --mf-bg-alt: var(--mf-ink-2);
  --mf-surface: var(--mf-ink-2);
  --mf-surface-raised: #393964;
  --mf-text: var(--mf-white);
  --mf-text-strong: var(--mf-white);
  --mf-text-muted: var(--mf-ink-soft);
  --mf-text-inverse: var(--mf-ink);
  --mf-brand-strong: var(--mf-sun);
  --mf-accent-text: #FF8A78;
  --mf-price: var(--mf-sun);
  --mf-link: var(--mf-sun);
  --mf-link-hover: #FFD466;
  --mf-link-decoration: var(--mf-sun);
  --mf-border: rgba(255, 255, 255, 0.14);
  --mf-border-strong: rgba(255, 255, 255, 0.30);
  --mf-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --mf-shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* base usage (left-to-right: the only line that differs from the Hebrew kit) */
html { direction: ltr; background: var(--mf-bg); color: var(--mf-text); }
body { font: var(--mf-weight-body) var(--mf-text-base) / var(--mf-leading-body) var(--mf-font-body); }
h1, h2, h3 { font-family: var(--mf-font-display); color: var(--mf-text-strong); line-height: var(--mf-leading-display); margin: 0 0 var(--mf-space-3); }
h1 { font-weight: var(--mf-weight-display); font-size: var(--mf-text-2xl); }
h2 { font-weight: var(--mf-weight-display); font-size: var(--mf-text-xl); }
h3 { font-family: var(--mf-font-body); font-weight: var(--mf-weight-label); font-size: var(--mf-text-lg); }
@media (min-width: 720px) { h1 { font-size: var(--mf-text-3xl); } h2 { font-size: var(--mf-text-2xl); } }
a { color: var(--mf-link); text-decoration: underline; text-decoration-color: var(--mf-link-decoration); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--mf-link-hover); }
:focus-visible { outline: 3px solid var(--mf-focus-ring); outline-offset: 2px; }
.mf-price { font-weight: var(--mf-weight-button); color: var(--mf-price); font-variant-numeric: tabular-nums; }
.mf-badge { display: inline-block; background: var(--mf-brand); color: var(--mf-on-brand); font: var(--mf-weight-button) var(--mf-text-sm) var(--mf-font-display); padding: 6px 14px; border-radius: var(--mf-radius-pill); }
.mf-cta { display: inline-flex; align-items: center; gap: var(--mf-space-2); background: var(--mf-cta-bg); color: var(--mf-cta-text); font: var(--mf-weight-display) var(--mf-text-base) var(--mf-font-display); padding: 14px 24px; border-radius: var(--mf-radius-pill); text-decoration: none; }
.mf-cta:hover { background: var(--mf-cta-bg-hover); color: var(--mf-cta-text); }
.mf-logo-mono { color: var(--mf-brand-strong); } /* logo-mono.svg / mark-mono.svg inherit currentColor when inlined: Ink on light, Sun on dark */