/* porvoosauna tokens. Every colour is traced to the source Webflow stylesheet :root (SPEC section 4,
 * exact hex); sizes are fluid clamp() with the template desktop px as the max and a 360px phone
 * minimum. rem = 16px. Olive is the only accent; there is no second hue. */
@layer tokens {
  :root {
    /* ---- colour, exact from the template ---- */
    --ps-color-cream: #fffef6;          /* body background */
    --ps-color-white: #ffffff;
    --ps-color-olive: #585e48;          /* primary + dark background */
    --ps-color-olive-deep: #2b332e;     /* base dark, hover on olive */
    --ps-color-green-deep: #1a2f0d;     /* text-primary */
    --ps-color-black: #000000;          /* headings */
    --ps-color-body: #666666;           /* body copy */
    --ps-color-gray: #d9d9d9;
    --ps-color-border: #e6e6dc;
    --ps-color-border-soft: #e6e6dc80;
    --ps-color-olive-15: #585e4726;
    --ps-color-olive-25: #585e4740;
    --ps-color-olive-50: #585e4780;
    --ps-color-tint: #eff1e7;           /* .booking-section / .pricing-box-1.box-light / .blog-section */
    --ps-color-white-60: #fff9;         /* overlay-white-six: footer links */
    --ps-color-white-20: #fff3;         /* overlay-white-two */
    --ps-color-plus: #8d9080;           /* accordion plus bars */
    /* form errors only (SPEC 4 allows no second accent; this is a state colour, never decorative) */
    --ps-color-error: #a23b2a;

    /* semantic aliases: use these in components */
    --ps-color-surface: var(--ps-color-cream);
    --ps-color-surface-alt: var(--ps-color-white);
    --ps-color-surface-tint: var(--ps-color-tint);
    --ps-color-dark: var(--ps-color-olive);
    --ps-color-accent: var(--ps-color-olive);
    --ps-color-accent-hover: var(--ps-color-olive-deep);
    --ps-color-text: var(--ps-color-body);
    --ps-color-text-strong: var(--ps-color-green-deep);
    --ps-color-heading: var(--ps-color-black);
    --ps-color-on-dark: var(--ps-color-white);
    --ps-color-on-dark-soft: var(--ps-color-gray);
    --ps-color-on-dark-muted: var(--ps-color-white-60);
    --ps-color-border-on-dark: #e6e6dc40;
    --ps-color-ok: var(--ps-color-green-deep);

    /* photo scrims: olive pulled over a photo. The template's dark panels are #000000ba over the
       image (parallax-overlay) and a 25px backdrop blur on the hero strip. */
    --ps-scrim-rgb: 43 51 46;           /* #2b332e */
    --ps-scrim: rgb(var(--ps-scrim-rgb) / 0.72);

    /* ---- shadows (the template has almost none: menu popup 0 5px 10px #0000000a) ---- */
    --ps-shadow-1: 0 5px 10px #0000000a;
    --ps-shadow-2: 0 12px 32px #585e4814;

    /* ---- type ---- */
    --ps-font-head: 'Italiana', Georgia, 'Times New Roman', serif;
    --ps-font-body: 'Jost', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --ps-font: var(--ps-font-body);
    --ps-fw-regular: 400;
    --ps-fw-medium: 500;
    --ps-fw-semibold: 600;

    /* fluid scale: max = template desktop px, min = 360px phone. Slope lands the max at 1440. */
    --ps-fs-display-1: clamp(2.5rem, 1.46rem + 4.63vw, 5.625rem);   /* 90 → 40 (hero-heading-lg at 1440+) */
    --ps-fs-section: clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem);     /* 60 → 36 (.section-heading) */
    --ps-fs-h2: clamp(2rem, 1.46rem + 2.4vw, 3.625rem);             /* 58 → 32 */
    --ps-fs-h3: clamp(1.625rem, 1.333rem + 1.3vw, 2.5rem);          /* 40 → 26 */
    --ps-fs-h4: clamp(1.375rem, 1.25rem + 0.56vw, 1.75rem);         /* 28 → 22 */
    --ps-fs-h5: clamp(1.125rem, 1.083rem + 0.19vw, 1.25rem);        /* 20 → 18 */
    --ps-fs-h6: 1rem;
    --ps-fs-lg: clamp(1.125rem, 1.083rem + 0.19vw, 1.25rem);        /* 20 → 18 */
    --ps-fs-body: 1rem;                                             /* 16 */
    --ps-fs-sm: 0.9375rem;                                          /* 15 */
    --ps-fs-xs: 0.875rem;                                           /* 14 */
    /* Italiana at card-title size: the template's 30px card titles, 35px fancy boxes, 25px time labels */
    --ps-fs-card-title: clamp(1.5rem, 1.35rem + 0.65vw, 1.875rem);  /* 30 → 24 */
    --ps-fs-box-title: clamp(1.625rem, 1.42rem + 0.93vw, 2.1875rem);/* 35 → 26 */
    --ps-fs-row-label: clamp(1.25rem, 1.18rem + 0.28vw, 1.5625rem); /* 25 → 20 */

    --ps-lh-display: 1.1;
    --ps-lh-heading: 1.25;
    --ps-lh-tight: 1.13;
    --ps-lh-body: 1.625;

    --ps-tracking-label: 0.12em;
    --ps-tracking-eyebrow: 0.16em;
    --ps-tracking-upper: 0.02em;

    /* ---- space ---- */
    --ps-space-1: 0.25rem;
    --ps-space-2: 0.5rem;
    --ps-space-3: 0.75rem;
    --ps-space-4: 1rem;
    --ps-space-5: 1.5rem;
    --ps-space-6: 2rem;
    --ps-space-7: 2.5rem;
    --ps-space-8: 3rem;
    --ps-space-9: 4rem;
    --ps-space-10: 5rem;
    --ps-space-11: 6rem;
    --ps-space-12: 8rem;

    --ps-gap: clamp(1.25rem, 1rem + 0.7vw, 1.875rem);               /* 30 → 20, the template grid gap */
    --ps-gap-lg: clamp(2rem, 1rem + 4vw, 4rem);
    --ps-block-gap: clamp(2rem, 1.5rem + 1.9vw, 3.75rem);           /* 60 → 32, section head → content */
    --ps-card-pad: clamp(1.5rem, 1.2rem + 1.1vw, 2.5rem);           /* 40 → 24, the ONE card padding */
    /* section padding: .space-section 168px desktop → 120 at 991 → 72 phone */
    --ps-section-pad: clamp(4.5rem, 3rem + 7vw, 10.5rem);
    --ps-section-pad-tight: clamp(3rem, 2rem + 3.6vw, 6.25rem);     /* 100 → 48 */

    /* ---- layout ---- */
    --ps-container: 82.5rem;                                        /* 1320px */
    --ps-container-narrow: 50rem;
    --ps-gutter: 1.5rem;                                            /* 24px (template 15, ours wider for touch) */
    --ps-measure-head: 50rem;
    --ps-measure-lead: 58rem;
    --ps-nav-h: 5.9375rem;                                          /* 95px, the hero's calc(100vh - 95px) */
    --ps-callbar-h: 4rem;
    --ps-tap: 2.75rem;                                              /* 44px targets */
    --ps-button-h: 3.4375rem;                                       /* 55px */
    --ps-button-h-sm: 2.75rem;                                      /* 44px */
    --ps-input-h: 3.75rem;                                          /* 60px */
    --ps-hero-panel: 22.5rem;                                       /* 360px olive panel, 410 at 1440, 460 at 1920 */

    /* ---- shape ---- */
    --ps-radius: 0;
    --ps-radius-pill: 999px;
    --ps-border: 1px;

    /* ---- motion ---- */
    --ps-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ps-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ps-ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
    --ps-dur: 0.3s;
    --ps-dur-slow: 0.7s;

    /* ---- z ---- */
    --ps-z-nav: 100;
    --ps-z-drawer: 110;
    --ps-z-callbar: 90;
    --ps-z-lightbox: 300;
    --ps-z-skip: 400;
  }

  @media (min-width: 1440px) { :root { --ps-hero-panel: 25.625rem; } }
  @media (min-width: 1920px) { :root { --ps-hero-panel: 28.75rem; } }
  @media (max-width: 991px) { :root { --ps-nav-h: 4.5rem; } }
}