/*
 * Walanja design tokens for the pages that share the search card: home, /hotel/search, /hotel/all.
 * The brand colours are the production ones (public/css/app.css --bs-walanja, colors.css). Do not add a colour here
 * without a job for it: orange is the action and the price, ink is text, teal is the single secondary accent.
 */
:root {
    --wj-orange: #F24C00;
    --wj-orange-ink: #C73D00;
    --wj-orange-dark: #A33000;
    --wj-orange-hover-ink: #A33000;
    --wj-orange-tint: #FFF0E8;
    --wj-ink: #252525;
    --wj-ink-2: #616161;
    --wj-line: #E3E3E0;
    --wj-line-strong: #C9C9C4;
    --wj-paper: #F6F7F8;
    --wj-card: #FFFFFF;
    --wj-teal: #01A7BF;
    --wj-teal-ink: #05768A;
    --wj-teal-tint: #E2F4F7;
    --wj-star: #FFB400;
    --wj-focus: rgba(242, 76, 0, .45);

    /* the greys and states the pages used to write as literals */
    --wj-link-ink: #4A4A4A;
    --wj-ink-3: #767676;
    --wj-placeholder: #767676;
    --wj-line-soft: #E9E9E6;
    --wj-fill: #EFEFEC;
    --wj-danger-ink: #B3261E;
    --wj-danger-strong: #8C1D18;
    --wj-danger-tint: #FDECEA;
    --wj-ok-ink: #1B5E32;
    --wj-ok-tint: #E8F5EC;
    --wj-warn-ink: #7A4300;
    --wj-warn-tint: #FFF1D6;
    --wj-scrim: rgba(37, 37, 37, .55);
    --wj-shadow: rgba(37, 37, 37, .16);
    --wj-on-ink: #fff;
    --wj-viewer: #252525; /* the photo viewer is dark in both themes */
    --wj-loader-scrim: rgba(255, 255, 255, .5);
    color-scheme: light;
    --wj-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* production value (public/css/app.css); a locally built app.css can carry another default, the pages must not */
    --bs-walanja: #F24C00;
    --bs-walanja-rgb: 242, 76, 0;
}

/*
 * Dark theme. The brand orange stays the production #F24C00 for every fill (buttons, footer, active states); only the
 * small orange text and links turn lighter, because #C73D00 is too dark to read on a dark card (white on #F24C00 is 3.6:1
 * on light as on dark, as the owner decided). Surfaces are a cool near-black so the orange is the only warm thing on the page.
 * theme.js sets data-theme on <html> before the first paint (saved choice, else the system's); without it the page is light.
 */
:root[data-theme="dark"] {
    --wj-orange-ink: #FF7F4D;
    --wj-orange-dark: #D93F00;
    --wj-orange-hover-ink: #FFA27C;
    --wj-orange-tint: #2B1E17;
    --wj-ink: #ECEDEF;
    --wj-ink-2: #A9AEB5;
    --wj-line: #2C3036;
    --wj-line-strong: #5C636D;
    --wj-paper: #121417;
    --wj-card: #1B1E23;
    --wj-teal-ink: #4CC3D8;
    --wj-teal-tint: #12313A;
    --wj-focus: rgba(255, 127, 77, .65);
    --wj-link-ink: #C9CDD3;
    --wj-ink-3: #8A9099;
    --wj-placeholder: #8A9099;
    --wj-line-soft: #262A30;
    --wj-fill: #262A30;
    --wj-danger-ink: #FF8A80;
    --wj-danger-strong: #FFB4AB;
    --wj-danger-tint: #3A1B19;
    --wj-ok-ink: #7FD59A;
    --wj-ok-tint: #14301E;
    --wj-warn-ink: #FFC66B;
    --wj-warn-tint: #3A2A10;
    --wj-scrim: rgba(0, 0, 0, .65);
    --wj-shadow: rgba(0, 0, 0, .5);
    --wj-on-ink: #121417;
    --wj-loader-scrim: rgba(18, 20, 23, .6);
    color-scheme: dark;
}

/*
 * One content width for the menu, the search bar and the page content: the Bootstrap container with the same inner padding
 * the home page always had (27px), so they all start and end on the same line. The banner stays the full container.
 */
.container.wj-wrap { padding-left: 27px; padding-right: 27px; }
@media (max-width: 767.98px) {
    .container.wj-wrap { padding-left: 14px; padding-right: 14px; }
}