/*fonts worden in theme/fonts.css geplaatst dmv postcss.fonts.js - npm run fonts:sync*/

/* Hotel Pagina — soft sage-green hospitality theme.
   Brand accent taken from the logo (#86bf95 ≈ hsl(138,34%,64%)); a deeper
   forest green is derived for interactive elements so text stays legible. */

:root{
    --color-primary:                #84bf97;              /* exact brand green (logo) */
    --color-primary-light:          hsl(139, 36%, 78%);
    --color-primary-dark:           hsl(147, 46%, 34%);

    --color-secondary:              hsl(162, 30%, 40%);
    --color-secondary-light:        hsl(150, 32%, 72%);
    --color-secondary-dark:         hsl(164, 36%, 24%);

    --color-background-theme-dark:  hsl(152, 24%, 15%);
    --color-background-theme-light: hsl(140, 34%, 96%);
    --color-background-theme-body:  hsl(140, 30%, 99.5%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(150, 6%, 55%);
    --color-black:                  hsl(152, 16%, 12%);

    --font-family:                  'Lexend', sans-serif;
    --font-family-title:            'Playfair Display', serif;
    --font-letter-spacing:          0;
    --font-letter-spacing-title:    -0.005em;

    --font-weight-light:            300;
    --font-weight-default:          400;
    --font-weight-title:            600;
    --font-weight-bold:             700;

    --line-height-default:          1.7;
    --line-height-tight:            1.25;

    --dotContent:                   "";   /* no decorative dot after titles */

    --color-font-default:           hsl(150, 12%, 24%);
    --color-font-title:             hsl(152, 22%, 14%);
    --color-font-accent:            hsl(146, 48%, 33%);
    --color-font-muted:             hsl(150, 8%, 46%);

    --text-transform:               none;
    --button-background:            var(--color-primary);        /* = brand green #84bf97 */
    --button-background-hover:      hsl(139, 34%, 54%);          /* deeper sage; keeps dark text legible */
    --button-text-color:            hsl(152, 26%, 13%);          /* dark text — white fails contrast on the light green */
    --button-font-weight:           700;

    --border-radius-sm:             6px;
    --border-radius:                12px;
    --border-radius-lrg:            20px;
    --border-radius-xl:             32px;

    --border-color:                 hsla(150, 22%, 38%, 0.15);
    --border-color-dark:            hsla(150, 22%, 28%, 0.25);

    --container-width:              90rem;
    --container-width-xs:           42rem;
    --container-width-sm:           60rem;
    --container-width-md:           75rem;
    --container-width-lg:           115rem;
    --container-width-xl:           120rem;
}