/* Sunny Side Apartments — design tokens
   Shared core with Sunny Side Cycling + one Apartments signature colour (Peach).
   Font paths assume the /fonts folder from this kit is served at /fonts/. */

/* Display face. Luckiest Guy replaces the kit's Gummy Yummy, which has no č:
   same chunky, playful caps, with full Slovenian and German. Apache License
   2.0, from Google Fonts. The logo is outlined artwork and is unaffected. */
@font-face {
  font-family: "Luckiest Guy";
  src: url("/fonts/LuckiestGuy-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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: "Luckiest Guy";
  src: url("/fonts/LuckiestGuy-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Label face: Nunito, a rounded sans, replaces the kit's Fredoka One. Neither
   Fredoka One nor Google's Fredoka has č, ć or đ - the č fell back to Omnes
   and looked thin. Nunito has the full Slovenian set. Variable weight,
   SIL Open Font License, from Google Fonts. */
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  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: "Nunito";
  src: url("/fonts/Nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Omnes";
  src: url("/fonts/Omnes.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Shared core (same as Sunny Side Cycling) */
  --ss-cream: #FEF9E5;      /* page background, "paper" */
  --ss-sun-haze: #FEF0D0;   /* soft hills, panels, alternate sections */
  --ss-sunbeam: #FFD37B;    /* badge sky, lit windows, secondary buttons */
  --ss-soca: #358E8C;       /* headlines, links, hills — large text (24px+) only on cream — 3.7:1 */
  --ss-ink: #1C3230;        /* body text, primary buttons, line art */

  /* Apartments signature */
  --ss-peach: #F6C3A1;      /* big line drawings, feature cards, social */
  --ss-peach-soft: #FBE0CD; /* icon circles, subtle tints */

  /* Badge-only colours (don't use for UI) */
  --ss-pine: #1F4B49;       /* house in the badge */
  --ss-hearth: #E58A4E;     /* sun in the badge */
  --ss-river: #7FC4BE;      /* Soča in the badge */

  /* Sister-brand signatures (for cross-links only) */
  --ss-cycling-mint: #AFD2C9;
  --ss-spa-mist: #C9DCE6;

  /* Text helpers */
  --ss-ink-muted: #4E5F5B;  /* captions — 6.4:1 on cream */

  /* Type */
  --ss-font-display: "Luckiest Guy", "Nunito", "Omnes", sans-serif; /* CAPS headlines — has č š ž */
  --ss-font-label: "Nunito", "Omnes", sans-serif;        /* headings, subheads, buttons, names — has č š ž ć đ */
  --ss-weight-label: 800;
  --ss-font-body: "Omnes", system-ui, sans-serif;                        /* everything else — has č š ž */

  --ss-text-display: clamp(2.5rem, 6vw, 4.5rem);
  --ss-text-h2: clamp(1.9rem, 4vw, 3.25rem);
  --ss-text-h3: 1.5rem;
  --ss-text-body: 1.125rem;
  --ss-text-small: 0.9375rem;
  --ss-leading-body: 1.55;
  --ss-tracking-caps: 0.02em;    /* display caps */
  --ss-tracking-sub: 0.12em;     /* "APARTMENTS" style sub-labels */

  /* Shape — everything round */
  --ss-radius-sm: 14px;
  --ss-radius-md: 24px;
  --ss-radius-lg: 32px;
  --ss-radius-pill: 999px;

  /* Space (8px scale) */
  --ss-space-1: 8px;
  --ss-space-2: 16px;
  --ss-space-3: 24px;
  --ss-space-4: 32px;
  --ss-space-6: 48px;
  --ss-space-8: 64px;
  --ss-space-12: 96px;

  --ss-shadow-card: 0 12px 28px rgba(28, 50, 48, 0.12);
  --ss-max-width: 1200px;
}