/*
 * Costa Tropical Stays: design tokens. The only place a colour, size, font, radius, shadow or duration of the
 * Stays site is written down; every Stays stylesheet reads these custom properties. Source: the Brand and Main
 * boards (docs/design/stays/). Separate from the admin tokens.css on purpose: Stays has its own look.
 *
 * Breakpoints (media queries cannot read custom properties, so they are written as numbers where used):
 *   sm   640px   phone to large phone / small tablet: cards and fields go from one column to two; the phone
 *                lockup and footer below it
 *   md   768px   the search bar's calendar pop-up shows two months side by side from here
 *   lg  1024px   footer: brand | links | languages on one row from here; below it the brand has its own row
 *   nav  1220px  header: below it the navigation and languages sit behind the menu button (the German header,
 *                the longest, needs 1202px of content plus a desktop scrollbar)
 */

/* Fonts: self-hosted variable woff2 (SIL OFL 1.1, see ../fonts/OFL.txt). Latin + Latin Extended covers all six
   languages (Polish needs the extended set). */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-latin-opsz-normal.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: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-latin-ext-opsz-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-latin-opsz-italic.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: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin-wght-normal.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 {
    /* Colour: the Brand board. Text pairs are checked for WCAG AA (4.5:1) on white, off-white and sand. */
    --st-sea: #0f5563;            /* buttons, links, focus ring */
    --st-sea-hover: #0a4350;      /* hover / pressed of sea */
    --st-sea-wash: #e8f0f1;       /* selected day range, quiet highlight behind sea text (sea on it 7.4:1) */
    --st-ink: #12201f;            /* headings, strong text, dark button */
    --st-text: #44504e;           /* body text */
    --st-muted: #5e6967;          /* hints, captions (5.7:1 on white) */
    --st-gold: #c9963f;           /* the logo, and the lockup words "Stays" and "Costa Tropical Real Estate" (a
                                     logotype, exempt from contrast; GD ruling F-302); other gold words use gold text */
    --st-gold-on-dark: #dca54a;   /* gold text and marks on deep */
    --st-gold-text: #8a6420;      /* gold text on light backgrounds (5.6:1 on white) */
    --st-deep: #0f2a2c;           /* dark bands */
    --st-on-deep: #d9e2df;        /* body text on deep */
    --st-sand: #f4f0e8;           /* warm bands, quiet panels */
    --st-off-white: #faf8f4;      /* footer band, page under cards */
    --st-white: #ffffff;          /* the page */
    --st-line: #ece6db;           /* dividers, card borders */
    --st-line-strong: #ddd6ca;    /* outlined pills (language button, chips) */
    --st-field: #c9c2b5;          /* field borders */
    --st-red: #b42318;            /* errors, alerts, the badge dot, the danger button (white on it 6.5:1) */
    --st-red-hover: #912018;      /* hover / pressed of the danger button */
    --st-red-on-dark: #f97066;    /* error marks on ink and deep (6.0:1 on ink) */
    --st-red-wash: #fdecea;       /* alert background */
    --st-red-wash-soft: #fdf5f4;  /* field background in error */
    --st-scrim: rgb(15 42 44 / 0.55); /* behind a dialog: deep at 55% */

    /* Type: Fraunces for headings (600; italic 400 for "Stays"), Instrument Sans for everything else. */
    --st-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --st-font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --st-text-2xs: 0.625rem;      /* 10  the phone header's "part of" line */
    --st-text-caps: 0.6875rem;    /* 11  the header's "part of" line (spaced capitals) */
    --st-text-xs: 0.75rem;        /* 12  labels in caps, badge count */
    --st-text-caption: 0.8125rem; /* 13  legal line, the agency name in the header */
    --st-text-sm: 0.875rem;       /* 14  captions, legal line, field labels */
    --st-text-md: 0.9375rem;      /* 15  nav, secondary text */
    --st-text-base: 1rem;         /* 16  body, controls */
    --st-text-lg: 1.125rem;       /* 18  lead paragraphs */
    --st-text-xl: 1.3125rem;      /* 21  card titles, phone brand */
    --st-text-2xl: 1.5rem;        /* 24  brand name, dialog title */
    --st-text-3xl: 2.125rem;      /* 34  section headings */
    --st-text-4xl: 2.5rem;        /* 40  step numbers */
    --st-text-display: clamp(2.25rem, 4.4vw, 3.5rem); /* the page's h1 */
    --st-weight-regular: 400;
    --st-weight-medium: 500;
    --st-weight-semibold: 600;
    --st-weight-bold: 700;
    --st-leading-display: 1.08;   /* the page's h1 */
    --st-leading-tight: 1.1;
    --st-leading-snug: 1.3;
    --st-leading-body: 1.55;
    --st-tracking-hero: -0.02em;  /* the page's h1 */
    --st-tracking-display: -0.015em;
    --st-tracking-caps: 0.09em;
    --st-tracking-caps-wide: 0.14em;
    --st-measure: 64ch;           /* longest line of running text */

    /* Space: a 4 px scale (plus a half step for optical nudges inside the lockup and the badge). */
    --st-space-half: 0.125rem;    /*  2 */
    --st-space-1: 0.25rem;        /*  4 */
    --st-space-2: 0.5rem;         /*  8 */
    --st-space-3: 0.75rem;        /* 12 */
    --st-space-4: 1rem;           /* 16 */
    --st-space-5: 1.25rem;        /* 20 */
    --st-space-6: 1.5rem;         /* 24 */
    --st-space-8: 2rem;           /* 32 */
    --st-space-10: 2.5rem;        /* 40 */
    --st-space-14: 3.5rem;        /* 56 */
    --st-space-18: 4.5rem;        /* 72 */

    /* Radii */
    --st-radius-sm: 4px;          /* tags, small chips */
    --st-radius-md: 8px;          /* buttons, fields */
    --st-radius-lg: 12px;         /* cards, alerts, calendar */
    --st-radius-xl: 16px;         /* panels, dialog */
    --st-radius-pill: 999px;      /* header pills, badge */

    /* Shadows: two levels only. Raised = a panel lifted off the page; overlay = above everything. */
    --st-shadow-raised: 0 10px 30px rgb(18 32 31 / 0.07);
    --st-shadow-overlay: 0 24px 60px rgb(18 32 31 / 0.18);

    /* Sizes */
    --st-tap: 44px;               /* smallest tap target */
    --st-control: 48px;           /* field and primary button height */
    --st-page-max: 1240px;        /* content width (Main board) */
    --st-calendar-two-months: 46rem; /* the date pop-up with two months side by side */
    --st-gutter: 24px;            /* page side padding; 16px on phones */
    --st-header-height: 60px;     /* header bar with the menu button */
    --st-brand-mark-phone-width: 28px;  /* logo A in the phone header (Mobile board), 4:5 */
    --st-brand-mark-phone-height: 35px;
    --st-hero-arch-height: 23.75rem;    /* the arch panel of the home band (380px) */

    /* Focus ring: drawn as an outline on every focusable thing. */
    --st-focus-width: 3px;
    --st-focus-offset: 2px;
    --st-focus-color: var(--st-sea);
    --st-focus-color-on-deep: var(--st-gold-on-dark);

    /* Motion: only for things that answer an action (open, close, state change). */
    --st-duration: 160ms;
    --st-duration-shimmer: 1.4s;  /* one sweep of the loading skeleton (stopped under reduced motion) */
    --st-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Layers */
    --st-z-header: 20;
    --st-z-popover: 30;
    --st-z-toast: 40;
}

@media (max-width: 639.98px) {
    :root {
        --st-gutter: 16px;
    }
}

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