/* ==========================================================================
   TIOO marketing design system — tokens (2026-10, version 3 "wide")
   A spread, edge-to-edge layout: one wide container (up to 1720px) with
   fluid side gutters, a 12-column grid, bigger body type (19px on a
   computer) and full-width tinted bands (light blue, warm off-white, one
   dark) for the section rhythm. Near-black ink, ONE accent (cobalt).
   Status and booking-site colours exist only for the drawn product (they
   are the real app's colours). Small radii, hairline borders, one shadow
   (the product mock). Never derived from the logo colours (the logo can
   change). Fonts are self-hosted: static/fonts/mkt/ (Latin subset, covers
   es/pt-br). Display: Geist (SIL OFL 1.1). Text: Inter (OFL 1.1).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/mkt/Inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/mkt/Geist-latin.a147f99cd533.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ink + surfaces */
  --ink: #0a0b0f;
  --ink-2: #26282f;
  --ink-3: #595c66;
  --ink-4: #6f727c;      /* 4.6:1 on white — smallest text only */
  --ink-rgb: 10, 11, 15;
  --line: rgba(10, 11, 15, 0.1);
  --line-2: rgba(10, 11, 15, 0.16);
  --bg: #ffffff;
  --bg-2: #f7f7f8;
  --bg-3: #efeff2;

  /* full-width section bands (calm, flat) */
  --band-blue: #e9f0fb;
  --band-blue-2: #dde8f8;
  --band-warm: #f6f4ef;
  --band-warm-2: #ede9e0;
  --band-price: #f6eadb;          /* calm apricot: the pricing band */
  --band-price-line: rgba(120, 80, 30, 0.14);

  /* one accent */
  --accent: #2b5cff;
  --accent-ink: #1d45d9;  /* 6.1:1 on white — text + focus */
  --accent-soft: #eaf0ff;
  --accent-soft-2: #cfdbff;
  --accent-rgb: 43, 92, 255;
  --accent-grad: var(--accent);
  --glow: rgba(43, 92, 255, 0.22);

  /* status (product mocks only) */
  --ok: #0f9d6c;
  --ok-ink: #0b6b4a;
  --ok-soft: #e4f7ee;
  --warn: #d98a07;
  --warn-ink: #8a5a00;
  --warn-soft: #fff4de;
  --bad: #d64545;
  --bad-ink: #a13030;
  --bad-soft: #fde8e8;

  /* booking sources (fixed product meaning) */
  --ch-booking: #0d3d8f;
  --ch-booking-soft: #dbe6fb;
  --ch-airbnb: #ff5a5f;
  --ch-airbnb-ink: #b23a3e;
  --ch-airbnb-soft: #ffe3e4;
  --ch-expedia: #e3a008;
  --ch-expedia-ink: #8a5a00;
  --ch-expedia-soft: #fff1cc;
  --ch-direct: #0f9d6c;
  --ch-direct-ink: #0b6b4a;
  --ch-direct-soft: #d9f4e7;

  /* on dark sections */
  --dark: #0a0b0f;
  --dark-2: #121318;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.74);
  --on-dark-3: rgba(255, 255, 255, 0.56);
  --on-dark-line: rgba(255, 255, 255, 0.12);
  --on-dark-accent: #8fa8ff;

  /* type scale — body text is bigger than usual on a computer (19px) */
  --fs-xs: 13px;
  --fs-s: 14.5px;
  --fs-m: 17px;
  --fs-l: 18px;
  --fs-xl: 20px;
  --fs-h3: 21px;
  --fs-h2: clamp(34px, 4.2vw, 64px);
  --fs-h2-s: clamp(30px, 3.4vw, 50px);
  --fs-h1: clamp(40px, 4.6vw, 76px);
  --track-display: -0.035em;

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 96px;

  --radius-s: 4px;
  --radius: 6px;
  --radius-l: 8px;
  --radius-xl: 10px;

  --shadow-s: none;
  --shadow: none;
  --shadow-l: 0 12px 32px -14px rgba(10, 11, 15, 0.22);
  --shadow-xl: 0 2px 4px rgba(10, 11, 15, 0.04), 0 32px 64px -24px rgba(10, 11, 15, 0.28);

  /* the wide container: 1720px max, side gutters 16px on phones growing
     to 72px on a big screen; the 12-column grid gap grows with it */
  --container: 1720px;
  --gutter: 16px;
  --col-gap: 20px;
  --header-h: 60px;

  /* motion: crisp, never bouncy */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.16s;
  --dur-2: 0.3s;
  --dur-3: 0.6s;
}

@media (min-width: 600px) {
  :root { --gutter: 28px; --col-gap: 24px; }
}
@media (min-width: 900px) {
  :root { --gutter: clamp(36px, 3.6vw, 72px); --col-gap: 28px; --header-h: 68px; --fs-m: 18px; --fs-l: 19px; --fs-xl: 21px; }
}
@media (min-width: 1280px) {
  :root { --col-gap: 32px; --fs-m: 19px; --fs-l: 20px; --fs-xl: 22px; --fs-h3: 22px; }
}