/* BookHotels.direct brand tokens (D-035, D-036).
   Palette from the logo: red-orange #FF3B2F, yellow #FFD60A, black #111.
   Fonts: Archivo Black (display) + Archivo (text), self-hosted, SIL OFL 1.1 (fonts/OFL.txt).
   Self-hosting keeps visitors' IPs away from third-party font CDNs (GDPR).
   Legacy variable names (--sea, --sand, --terracotta, --apricot) are kept so older page CSS keeps working. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("/fonts/archivo-black.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* brand */
  --brand: #FF3B2F;        /* red-orange: big surfaces, logo background. Text on it must be --ink (5.3:1) */
  --yellow: #FFD60A;       /* the tag: highlights, buttons on brand/ink surfaces */
  --ink: #111111;          /* text, dark surfaces */
  --on-brand: #111111;
  --accent: #D42A1F;       /* red for text/links on light surfaces (5.1:1 on white) */

  /* surfaces */
  --sand: #FFF8E6;         /* page background, warm light yellow */
  --paper: #FFFFFF;        /* cards */
  --muted: #4A4A4A;        /* secondary text (8.4:1 on --sand) */
  --line: #F0E2B8;

  /* legacy names, mapped onto the brand */
  --sea: #111111;          /* dark blocks */
  --sea-2: #D42A1F;        /* interactive accent */
  --sea-3: #FFF0B3;        /* light tint */
  --terracotta: #D42A1F;
  --apricot: #FFD60A;

  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Archivo Black", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  --serif: var(--font-display);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sand: #111111;
    --paper: #1C1C1C;
    --ink: #FFFFFF;
    --muted: #C2C2C2;
    --line: #2E2E2E;
    --accent: #FF6A5F;
    --terracotta: #FF6A5F;
    --sea: #1C1C1C;
    --sea-2: #FF6A5F;
    --sea-3: #2A2410;
    --on-brand: #111111;
  }
}