/* BREZA design tokens and base styles. Source of truth: CLAUDE.md, section Vizualni identitet. */

/* ---- fonts: self-hosted, SIL Open Font Licence (see assets/fonts/LICENSE-*.txt) ---- */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/schibsted-grotesk-latin-ext-wght-normal.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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/schibsted-grotesk-latin-wght-normal.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: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-ext-full-normal.woff2') format('woff2-variations'), url('../fonts/fraunces-latin-ext-full-normal.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: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-full-normal.woff2') format('woff2-variations'), url('../fonts/fraunces-latin-full-normal.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; }

/* ---- tokens ---- */
:root {
  /* colours */
  --breza-bijela: #F7F5F0;      /* brezino bijelo: podloga, papir */
  --ugljen: #1E1E1C;             /* tekst, tamna podloga, ploca za tekst na fotografiji */
  --srebrna: #C9C7C0;          /* srebrna kora: linije, natpis mjesta na tamnom; nikad za tekst na bijelom */
  --zelena: #8FA65B;            /* zelena mladog lisca: debla u znaku, linija krova, naglasci */
  --drvo: #D3B487;             /* brezino drvo, ton za svijetle podloge */
  --drvo-tamno: #D9C6A5;       /* brezino drvo, ton za tamne podloge i ploce */
  --plava: #2E4A52;            /* nordijska plava: wordmark, ploce, naslovi, glavni gumb */
  --plava-tamno: #4C7583;      /* nordijska plava na ugljenu */
  --plava-tint: #C7D5D9;        /* tekst na plavoj plohi kad nije bijel */
  --tekst: #1E1E1C;
  --tekst-sekundarni: #5D5C58;  /* natpis mjesta, sekundarni tekst na svijetlom (kontrast 5,9:1) */
  --linija: #E3E1DB;            /* hairline razdjelnici na svijetlom */
  --linija-tamna: #4A4A47;

  /* type */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fraunces-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;

  /* spacing scale (8 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --max-w: 1280px;
  --gutter: clamp(16px, 5vw, 96px);
}

/* ---- base ---- */
html { background: var(--breza-bijela); color: var(--tekst); font-family: var(--font-sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
img, video, svg { max-width: 100%; display: block; }

/* Fraunces: only headings and sentences that need warmth. Never running text, never uppercase, never below 24 px. */
.serif, h1, h2 { font-family: var(--font-serif); font-weight: 400; font-optical-sizing: none; font-variation-settings: var(--fraunces-settings); letter-spacing: -0.012em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 88px); }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0; }
p { margin: 0 0 var(--s-4) 0; }
.lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.4; }
.small { font-size: 14.5px; line-height: 1.5; color: var(--tekst-sekundarni); }

/* labels: uppercase, wide tracking, always Schibsted */
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tekst-sekundarni); }
.label--place { font-weight: 400; letter-spacing: 0.36em; }   /* natpis mjesta style */

/* numbers and house data: Schibsted, one line, spaced middle dots: Tip L · 4 sobe · 138 m² · vrt 220 m² */
.num { font-family: var(--font-sans); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }

/* buttons: teal is the main call, the secondary is outlined teal (green with white text fails contrast on the web) */
.btn { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn--primary { background: var(--plava); color: #fff; border-color: var(--plava); }
.btn--primary:hover, .btn--primary:focus-visible { background: #24404A; border-color: #24404A; }
.btn--secondary { background: transparent; color: var(--plava); border-color: var(--plava); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--plava); color: #fff; }
.btn--on-dark { background: var(--zelena); color: var(--ugljen); border-color: var(--zelena); }   /* green button only on charcoal/photo plates, charcoal text */
:focus-visible { outline: 2px solid var(--zelena); outline-offset: 3px; }

/* text on a photograph always sits on a charcoal plate, never directly on the image */
.plate { background: var(--ugljen); color: #fff; padding: clamp(20px, 2.5vw, 32px) clamp(22px, 3vw, 36px); max-width: 560px; }
.plate .serif { color: #fff; }
.plate p { color: #D9D7D0; }

/* surfaces */
.surface--plava { background: var(--plava); color: #fff; }
.surface--plava .label { color: var(--plava-tint); }
.surface--ugljen { background: var(--ugljen); color: #fff; }
.surface--ugljen .small { color: #A9A7A0; }

/* roof line: divider, section icon, signature. Inline SVG in assets/graphics/linija-krova*.svg */
.roof-line { display: block; width: 80px; height: auto; }
.roof-line--divider { width: 100%; max-width: 360px; }

/* pattern in tints as a background behind a numbers section, never behind body text */
.bg-uzorak { background-image: url('../graphics/uzorak-tile.svg'); background-size: 196px 336px; background-repeat: repeat; }   /* tile is 98 x 168, use whole multiples */

/* trunk with cuts as an edge element (left edge of a section or card) */
.edge-deblo { position: relative; }
.edge-deblo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: url('../graphics/deblo-urezi-zelena.svg') left top / 14px auto repeat-y; }

/* layout helpers */
.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.hairline { border: 0; border-top: 1px solid var(--linija); margin: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }