/* ============================================================
   Flow Hotels — design tokens
   Drop this in any page and you inherit the Flow system.
   Fonts are self-hosted; point the url()s at where you keep them.
   ============================================================ */

@font-face{font-family:"Google Sans Flex";font-weight:1 1000;font-display:swap;src:url("assets/fonts/GoogleSansFlex-var.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-display:swap;src:url("assets/fonts/Newsreader-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url("assets/fonts/SpaceMono-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-weight:700;font-display:swap;src:url("assets/fonts/SpaceMono-700.woff2") format("woff2")}
@font-face{font-family:"Bebas Neue";font-weight:400;font-display:swap;src:url("assets/fonts/BebasNeue-400.woff2") format("woff2")}

:root{
  /* --- the Frame (structure) --- */
  --flow-cream:#F4F0E8;     /* page background */
  --flow-sand:#EDEBE0;      /* soft panels */
  --flow-ink:#1C1A17;       /* primary text */
  --flow-wood:#311B0C;      /* dark surface */
  --flow-gold:#E9B36A;      /* accent / focus */
  --flow-lime:#E2E89D;      /* experiences accent */
  --flow-graphite:#28282A;  /* footer / near-black */
  --flow-brown:#2A2119;     /* buttons */
  --flow-creamtext:#FCF6EA; /* text on dark */
  --flow-rule:#D8D5C8;      /* hairlines */
  --flow-mut:#8A8175;       /* muted labels */
  --flow-body:#4A443B;      /* secondary body text */

  /* --- the Street (lifted from CDMX photos — use in objects/art, not type) --- */
  --flow-cafe:#564740; --flow-buganvilia:#B3617A; --flow-agua:#A0C0C2; --flow-salvia:#ADBF8E;
  --flow-mostaza:#D9CE8E; --flow-lavanda:#D1C1DE; --flow-rosa:#FADDE2; --flow-limon:#ECE8A2;
  --flow-crema:#F3EBCF; --flow-gris:#D5D5D3;

  /* --- type --- */
  --flow-brandface:"Google Sans Flex",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --flow-storyface:"Newsreader",Georgia,serif;
  --flow-proofface:"Space Mono",ui-monospace,monospace;
  --flow-shelfface:"Bebas Neue",sans-serif;
  --flow-track:-.03em;      /* the −3% signature, on all brand/display type */

  /* --- space, radius, motion --- */
  --flow-u:clamp(16px,1.5vw,24px);
  --flow-radius:26px;
  --flow-radius-card:28px;
  --flow-ease:cubic-bezier(.22,.8,.28,1);

  /* --- warm shadows (the "float") --- */
  --flow-shadow:0 1px 2px rgba(60,42,24,.08),0 12px 24px -10px rgba(60,42,24,.18),0 42px 64px -28px rgba(60,42,24,.22);
  --flow-shadow-card:0 8px 16px rgba(44,24,6,.30),0 44px 84px -22px rgba(30,14,2,.62);
}

/* base */
body{background:var(--flow-cream);color:var(--flow-ink);font-family:var(--flow-brandface);font-weight:300;letter-spacing:var(--flow-track);line-height:1.5;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
:focus-visible{outline:2px solid var(--flow-gold);outline-offset:3px}

/* the lockup — Flow bold + place extralight, solid */
.flow-lockup{font-family:var(--flow-brandface);letter-spacing:var(--flow-track);font-weight:200}
.flow-lockup b{font-weight:700}

/* button */
.flow-btn{font-family:var(--flow-brandface);font-weight:500;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;background:var(--flow-brown);color:#F6F1E7;border:0;padding:.95rem 1.7rem;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer}
.flow-btn:hover{background:#3A2E22}

/* kicker / eyebrow label (note the INVERTED positive tracking) */
.flow-kicker{font-family:var(--flow-brandface);font-size:.66rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--flow-mut)}

/* proof text */
.flow-proof{font-family:var(--flow-proofface);letter-spacing:0}