/* =====================================================================
   Find A BNB - design tokens
   ---------------------------------------------------------------------
   APPROVED:  --fab-green (#01411C, "Pakistan Flag Green") is the ONLY
              previously approved exact brand colour.
   VISUAL RECONSTRUCTION: every other value below was measured from the
              approved reference PNG (FindABNB_00_APPROVED_HOMEPAGE.png,
              941 px wide) by canvas sampling / edge detection and scaled
              to a 1280 px desktop viewport (x 1.36). They are PROPOSED
              tokens, NOT approved brand values. ASHER GATE before launch.
   Fonts: macOS system fonts referenced by name only (nothing embedded,
              nothing downloaded). Production OFL proposal: Libre Caslon
              Text (or Source Serif 4) + Inter. See qa/00-homepage-qa.md.
   ===================================================================== */
:root {
  /* ---- colour: approved ---- */
  --fab-green: #01411C;                 /* APPROVED brand green */

  /* ---- colour: VISUAL RECONSTRUCTION (proposed) ---- */
  --fab-green-hover: #02552a;           /* VISUAL RECONSTRUCTION - derived hover */
  --fab-green-band-a: #0f4b2b;          /* VISUAL RECONSTRUCTION - band gradient light end (sampled #0e492a) */
  --fab-green-band-b: #02361b;          /* VISUAL RECONSTRUCTION - band gradient dark end (sampled #02371c) */
  --fab-cream: #fef8f1;                 /* VISUAL RECONSTRUCTION - page background (sampled #fef8f1/#fef9f1) */
  --fab-cream-header: #fdf6ef;          /* VISUAL RECONSTRUCTION - header background (sampled #fef6f0) */
  --fab-surface: #fefaf4;               /* VISUAL RECONSTRUCTION - search bar / card surface (sampled #fef7ee) */
  --fab-field: #ffffff;                 /* VISUAL RECONSTRUCTION - input fill on focus */
  --fab-border: #e6dccf;                /* VISUAL RECONSTRUCTION - card / pale neutral border */
  --fab-divider: #e3d9cc;               /* VISUAL RECONSTRUCTION - search bar segment divider (sampled #ede4d9) */
  --fab-ink: #1c1a17;                   /* VISUAL RECONSTRUCTION - headings, warm near-black */
  --fab-ink-body: #2f2c28;              /* VISUAL RECONSTRUCTION - body copy */
  --fab-ink-muted: #5a554e;             /* VISUAL RECONSTRUCTION - hints (AA on cream: 7.0:1) */
  --fab-rule: #4a4743;                  /* VISUAL RECONSTRUCTION - eyebrow rule on cream */
  --fab-on-dark: #ffffff;               /* VISUAL RECONSTRUCTION - text on hero / band */
  --fab-on-dark-soft: rgba(255, 255, 255, 0.86);
  --fab-hero-scrim: linear-gradient(90deg, rgba(38, 20, 8, 0.5) 0%, rgba(38, 20, 8, 0.36) 34%, rgba(38, 20, 8, 0.06) 58%, rgba(38, 20, 8, 0) 70%);
  --fab-demo-bg: #fff3c4;               /* VISUAL RECONSTRUCTION - demo badge (not in reference; required by product truth) */
  --fab-demo-ink: #4a3a00;
  --fab-focus: #b8860b;                 /* focus ring outer (visible on cream and green) */

  /* ---- type families ---- */
  --fab-font-serif: "Iowan Old Style", "Hoefler Text", Baskerville, Georgia, "Times New Roman", serif;
  --fab-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- type sizes (VISUAL RECONSTRUCTION, desktop 1280; fluid via clamp) ---- */
  --fab-fs-hero: clamp(2.4rem, 1.1rem + 4.05vw, 4.25rem);       /* ~68px @1280 */
  --fab-fs-h2: clamp(1.75rem, 1.05rem + 2.1vw, 2.8rem);         /* ~44px @1280 */
  --fab-fs-band: clamp(1.75rem, 1.1rem + 1.6vw, 2.35rem);       /* ~37.5px @1280 */
  --fab-fs-wordmark: 2.05rem;                                    /* ~33px */
  --fab-fs-card-title: 1.43rem;                                  /* ~23px */
  --fab-fs-tile: 1.9rem;                                         /* ~30px */
  --fab-fs-lead: clamp(1.05rem, 0.8rem + 0.75vw, 1.45rem);      /* ~23px @1280 */
  --fab-fs-nav: 1rem;                                            /* 16px */
  --fab-fs-body: 1rem;
  --fab-fs-card-body: 0.97rem;                                   /* ~15.5px */
  --fab-fs-small: 0.875rem;
  --fab-fs-eyebrow: 1.03rem;                                     /* letter-spaced caps */
  --fab-ls-eyebrow: 0.345em;
  --fab-fs-h2-sm: clamp(1.6rem, 1rem + 1.85vw, 2.55rem);       /* ~40.5px @1280, destinations heading */
  --fab-lh-tight: 1.02;
  --fab-lh-body: 1.4;

  /* ---- spacing / layout (VISUAL RECONSTRUCTION) ---- */
  --fab-container: 1185px;              /* 871px in reference x 1.36 */
  --fab-gutter: clamp(16px, 3.75vw, 48px);
  --fab-header-h: 78px;
  --fab-demo-bar-h: 0px;               /* global DEMO bar (desktop, single line) */
  /* homepage hero: fits the first viewport (svh) on laptops, never taller than the reference
     proportion 607/941 of the width (64.5vw) or 900px, never shorter than its content */
  --fab-hero-home-h: min(64.5vw, 900px, max(calc(100svh - var(--fab-header-h) - var(--fab-demo-bar-h)), 540px));
  --fab-hero-h: clamp(600px, 64.5vw, 900px);   /* 607/941 of width; finite */
  --fab-section-pad: clamp(36px, 3.75vw, 48px);
  --fab-gap: 24px;

  /* ---- shape / elevation ---- */
  --fab-radius-sm: 8px;
  --fab-radius: 14px;
  --fab-radius-lg: 22px;
  --fab-radius-pill: 999px;
  --fab-shadow-bar: 0 10px 30px rgba(40, 22, 8, 0.18);
  --fab-shadow-card: 0 1px 2px rgba(60, 40, 20, 0.06);

  /* ---- motion ---- */
  --fab-ease: cubic-bezier(.2, .7, .2, 1);
  --fab-dur: 160ms;
  --fab-touch: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fab-dur: 0ms; }
}