/*
  Global structural defaults + design tokens from Figma
  (file CkFpoWvEBh0qngqYBpUhow, node 2465:147 "Home", mobile 430px).
*/

@font-face {
  font-family: "Advent Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/advent-pro-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Advent Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/advent-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Danfo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/danfo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* Colors */
  --color-ink: #161616;       /* near-black background */
  --color-cream: #f3f0dd;     /* text-on-dark, card background */
  --color-mint: #cadedc;      /* Spyros card background */
  --color-lavender: #dbcade;  /* Dimitris card background */
  --color-lime: #defc3a;      /* primary CTA (Book Now) */

  /* Fonts */
  --font-display: "Advent Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Danfo", var(--font-display);
  --font-body: var(--font-display);
}

html {
  font-family: var(--font-body);
  background: var(--color-ink);
  color: var(--color-cream);
}

body {
  overflow-x: hidden;
  /* Room for the site-wide fixed floating "Book Now" bar (components.css .floating-cta). */
  padding-bottom: 96px;
}

/*
  Site-wide content cap: the design is built mobile-first up to the
  tablet breakpoint (912px). Rather than stretching that layout edge to
  edge on wider desktop screens (which was never designed), the content
  simply stops growing past 912px and centers itself. This applies on
  every page, not just Home. A real desktop-specific layout can replace
  this once Figma provides one.
*/
main {
  max-width: 912px;
  margin-inline: auto;
}

.container {
  /* TODO: max-width / horizontal padding scale to be defined by Figma layout grid. */
  width: 100%;
}

/* Visually hides content while keeping it available to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Baseline visible focus state — must remain visible once real colors
   are introduced; do not remove for aesthetic reasons. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}