/* KoolRooms design tokens - taken from KoolRooms Tallinn.dc.html
   ------------------------------------------------------------------ */

/* Self-hosted webfonts. No request leaves the site. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* ---- Colour ---- */
  --kr-bg:            #F4F4F0;  /* page ground */
  --kr-surface:       #FFFFFF;  /* cards, filter bar, form panels */
  --kr-ink:           #16150F;  /* headings, primary text, dark buttons */
  --kr-ink-hover:     #2E2C25;  /* dark button hover */
  --kr-body:          #3E3C35;  /* body copy */
  --kr-muted:         #5E5C55;  /* secondary text */
  --kr-muted-2:       #6B6960;  /* tags, taken state */
  --kr-muted-3:       #8A8880;  /* footer labels, distance mode */

  --kr-line:          #E3E1DA;  /* card border */
  --kr-line-strong:   #DDDBD3;  /* header rule, image placeholder */
  --kr-line-input:    #C9C7BF;  /* input border, dashed empty state */
  --kr-hover-bg:      #E9E8E2;  /* nav hover, inactive step */

  /* Moss, from the Cormorant/moss logo package. The chevron colour is #5E7A3A
     and the rest are derived from it; each was checked for contrast, and the
     set is more legible than the terracotta it replaces - white on #5E7A3A is
     4.86:1 where white on the old #E4573D was 3.67:1, below AA for body text. */
  --kr-accent:        #5E7A3A;  /* primary CTA moss - white on it 4.86:1 */
  --kr-accent-hover:  #6C8B45;
  --kr-accent-deep:   #4A612D;  /* links, kickers, errors - 6.27:1 on the ground */
  --kr-accent-tint:   #DDE7CD;  /* ::selection, note badge */
  --kr-accent-ink:    #33441C;  /* note badge text - 8.26:1 on the tint */
  --kr-accent-on:     #FFFFFF;  /* text and icons sitting on --kr-accent.
                                   Moss is dark enough that the ink used with
                                   the old terracotta dropped to 3.76:1; white
                                   is 4.86:1. */

  /* Validation. Deliberately NOT the accent: now that moss is the brand
     colour, a green error reads as decoration rather than a problem. This is
     the terracotta the moss switch freed up, so it still belongs to the
     palette's warmth and saturation, but it no longer carries any brand
     meaning - which is exactly what an error wants. It also stays clear of the
     two colours availability has already spoken for, the green "free" chip and
     the amber "partial" one, so nothing on a listing can read as a field error.
     #B93E28 is 5.55:1 on white panels, 5.03:1 on the page ground, and 4.73:1
     on its own tint. */
  --kr-error:         #B93E28;
  --kr-error-hover:   #A2331F;
  --kr-error-tint:    #FBE9E5;

  --kr-green:         #1F4D3A;  /* dark green sections, uni pins */
  --kr-green-soft:    #C5DACF;  /* text on green */
  --kr-ring:          #9BB3A5;  /* map walking rings */

  --kr-free-bg:       #DCEFE3;  /* availability: free */
  --kr-free-fg:       #1B5E3B;
  --kr-partial-bg:    #FBEBC2;  /* availability: free from a date */
  --kr-partial-fg:    #6E5200;
  --kr-taken-bg:      #E6E5DF;  /* availability: taken */
  --kr-taken-fg:      #6B6960;

  --kr-footer-bg:     #16150F;
  --kr-footer-fg:     #F4F4F0;
  --kr-footer-muted:  #B5B3AA;

  --kr-overlay:       rgba(22, 21, 15, .70);  /* photo-count pill */
  --kr-overlay-2:     rgba(22, 21, 15, .75);  /* gallery counter */
  --kr-scrim:         rgba(22, 21, 15, .94);  /* lightbox */
  --kr-glass:         rgba(244, 244, 240, .92); /* sticky header, gallery arrows */
  --kr-glass-2:       rgba(244, 244, 240, .94);

  /* ---- Type ---- */
  --kr-font:          'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kr-font-display:  'Space Grotesk', 'DM Sans', system-ui, sans-serif;

  --kr-fs-11: 11px;  --kr-fs-12: 12px;  --kr-fs-13: 13px;  --kr-fs-14: 14px;
  --kr-fs-15: 15px;  --kr-fs-16: 16px;  --kr-fs-17: 17px;  --kr-fs-18: 18px;
  --kr-fs-20: 20px;  --kr-fs-21: 21px;  --kr-fs-22: 22px;  --kr-fs-24: 24px;
  --kr-fs-26: 26px;  --kr-fs-28: 28px;  --kr-fs-36: 36px;  --kr-fs-44: 44px;
  --kr-fs-48: 48px;

  /* Fluid display sizes, exactly as the design declares them */
  --kr-h1-home:    clamp(50px, 9.5vw, 136px);
  --kr-h1-room:    clamp(40px, 6vw, 76px);
  --kr-h1-page:    clamp(40px, 6.5vw, 80px);
  --kr-h2-section: clamp(36px, 5vw, 64px);

  --kr-ls-h1-home: -.045em;
  --kr-ls-h1:      -.04em;
  --kr-ls-h2:      -.035em;
  --kr-ls-sm:      -.02em;
  --kr-ls-xs:      -.015em;
  --kr-ls-caps:    .06em;   /* uppercase field labels */
  --kr-ls-kicker:  .08em;   /* uppercase kickers */

  --kr-lh-tight:   .92;
  --kr-lh-h1:      .95;
  --kr-lh-1:       1;
  --kr-lh-quote:   1.35;
  --kr-lh-lead:    1.45;
  --kr-lh-body:    1.5;
  --kr-lh-copy:    1.55;
  --kr-lh-long:    1.6;

  /* ---- Space ---- */
  --kr-sp-1: 4px;   --kr-sp-2: 6px;   --kr-sp-3: 8px;   --kr-sp-4: 10px;
  --kr-sp-5: 12px;  --kr-sp-6: 14px;  --kr-sp-7: 16px;  --kr-sp-8: 18px;
  --kr-sp-9: 20px;  --kr-sp-10: 24px; --kr-sp-11: 28px; --kr-sp-12: 32px;
  --kr-sp-13: 36px; --kr-sp-14: 40px; --kr-sp-15: 44px; --kr-sp-16: 48px;
  --kr-sp-17: 52px; --kr-sp-18: 56px; --kr-sp-19: 64px; --kr-sp-20: 72px;
  --kr-sp-21: 80px;

  --kr-container:      1200px;
  --kr-container-narrow: 920px;
  --kr-gutter:         24px;
  --kr-header-h:       84px;
  --kr-sticky-top:     104px;  /* header + 20px */

  /* ---- Radii ---- */
  /* Two lines, not ten. The scale used to run 6/8/10/12/14/16/18/20/24/pill
     and every step was in use, so a chip, a select and the card behind them
     each had their own corner language in the same panel. Everything the user
     operates is now one radius and every surface is another; only true dots
     and avatars stay circular. The old names are kept as aliases so existing
     rules keep reading, but each resolves to one of the two lines. */
  --kr-r-control: 12px;  /* chips, buttons, inputs, selects, badges, tags */
  --kr-r-surface: 18px;  /* cards, panels, media, modals */
  --kr-r-dot:     50%;   /* map dots and rings, legend keys, avatars */

  --kr-r-xs:   var(--kr-r-control);
  --kr-r-sm:   var(--kr-r-control);
  --kr-r-md:   var(--kr-r-control);
  --kr-r-lg:   var(--kr-r-control);
  --kr-r-xl:   var(--kr-r-surface);
  --kr-r-2xl:  var(--kr-r-surface);
  --kr-r-3xl:  var(--kr-r-surface);
  --kr-r-4xl:  var(--kr-r-surface);
  --kr-r-5xl:  var(--kr-r-surface);
  --kr-r-pill: var(--kr-r-control);  /* no pills any more; alias is a net */

  /* ---- Borders ---- */
  --kr-bw:      1px;
  --kr-bw-mid:  1.5px;   /* the design's signature 1.5px rule */
  --kr-bw-thick: 2.5px;  /* active gallery thumbnail */

  /* ---- Elevation ---- */
  --kr-shadow-card-hover: 0 14px 34px rgba(22, 21, 15, .10);

  /* ---- Motion ---- */
  --kr-t-fast: .15s;
  --kr-t-base: .3s;

  /* ---- Layers ---- */
  --kr-z-header:   50;
  --kr-z-sticky:   60;
  --kr-z-dialog:  100;
  --kr-z-lightbox: 110;

  /* ---- Breakpoint (documented; media queries cannot read a custom property) ---- */
  --kr-bp-mobile: 840px;
}