/*
 * KALASTAR / DESIGN SYSTEM — jedino mjesto za vizualne postavke.
 * 1. Font: promijeni Google Fonts URL i --font-family-base u OVOJ datoteci.
 * 2. Brand: boje promijeni u sekciji BOJE; ostali CSS koristi var(--...).
 * 3. Tipografija: --font-* su fiksna skala, --fluid-* adaptivni naslovi.
 * 4. Layout: širina, gutter, hero i radijusi ispod.
 * Ovaj se CSS učitava PRIJE site.css/contact.css i u Gutenberg editoru.
 * Ne treba uređivati druge CSS datoteke za globalnu promjenu.
 */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ===== BOJE / BRAND (naslovnica + projekti predlošci) =====
   * Source of truth for public website, Kontakt and block editor.
   * Neutral/yellow hero variant is used; source artwork is retained unchanged.
   */
  --ink: #0e0714;                 /* Primary headline / text from Figma */
  --surface-dark: #0e0714;        /* Quick links, footer, contact dark cards */
  --surface-dark-hover: #241b2a;
  --orange: #e87d1b;              /* Orange CTA and small details */
  --orange-hover: #f18c2c;
  --orange-soft: #e87d1b;
  --accent-green: var(--orange); /* Legacy alias: bez zelene, sve akcente vodi narančasta */
  --surface-hero: #f9f9f9;
  --surface-subtle: #f9f9f9;
  --surface-card: #f4f4f4;        /* Project captions, as in the mockup */
  --white: #ffffff;
  --black: #000000;
  --muted: #514d54;
  --focus: #e87d1b;
  --image-fallback: #eeeceb;
  --border-soft: #e3e0e2;
  --breadcrumb: #766f79;
  --border-table: #e2dfe1;
  --border-list: #e2dfe1;
  --border-input: #d4cfd3;
  --border-menu: #e9e6e8;
  --border-contact: #e4e0e3;
  --contact-eyebrow: #e9e5e8;
  --contact-label: #ededed;
  --contact-tile-label: #e9e5e8;
  --contact-data-label: #6a636c;
  --editor-edge: #ded9de;
  --editor-rule: #e8e4e7;
  --editor-divider: #eee9ec;
  --editor-bg: #faf9fa;
  --editor-title: #0e0714;
  --editor-muted: #514d54;
  --editor-border: #e2dee1;
  --editor-ink: #0e0714;
  --editor-help: var(--orange);
  --editor-border-soft: #eee9ec;
  --editor-neutral-border: #dddddd;
  --editor-surface: #f8f7f8;
  --grid-ink: #e7e4e7;
  --grid: color-mix(in srgb, var(--grid-ink) 80%, transparent);
  --banner-shadow-left: #0e0714;
  --banner-shadow-right: #0e0714;
  --banner-shadow-base: #0e0714;
  --shadow-ink: #0e0714;

  /* ===== FONT / DEBLJINE / RAZMACI ===== */
  --font-family-base: "Onest", "Arial", sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 900;
  --leading-body: 1.55;
  --tracking-display: -.035em;
  --tracking-heading: -.02em;
  --font-body: var(--font-17);
  --font-body-mobile: var(--font-16);
  --font-6-5: 6.5px;
  --font-8-1: 8.1px;
  --font-9: 9px;
  --font-10: 10px;
  --font-11: 11px;
  --font-12: 12px;
  --font-13: 13px;
  --font-14: 14px;
  --font-15: 15px;
  --font-16: 16px;
  --font-17: 17px;
  --font-18: 18px;
  --font-19: 19px;
  --font-20: 20px;
  --font-21: 21px;
  --font-22: 22px;
  --font-23: 23px;
  --font-24: 24px;
  --font-25: 25px;
  --font-26: 26px;
  --font-27: 27px;
  --font-28: 28px;
  --font-29: 29px;
  --font-30: 30px;
  --font-36: 36px;
  --font-40: 40px;
  --font-42: 42px;
  --font-48: 48px;
  --font-49: 49px;

  /* ===== ADAPTIVNI NASLOVI / SEKCIJE ===== */
  --fluid-home-legacy: clamp(62px,7.1vw,98px);
  --fluid-section-title: clamp(45px,4.75vw,68px);
  --fluid-project-card: clamp(26px,2.2vw,33px);
  --fluid-place-title: clamp(48px,5vw,72px);
  --fluid-cta-title: clamp(41px,4.4vw,62px);
  --fluid-article-title: clamp(48px,6vw,84px);
  --fluid-entry-lead: clamp(21px,2.4vw,27px);
  --fluid-home-old-laptop: clamp(58px,7.25vw,92px);
  --fluid-section-old-laptop: clamp(42px,5vw,65px);
  --fluid-home-old-tablet: clamp(62px,10vw,92px);
  --fluid-projects-tablet: clamp(42px,5.4vw,58px);
  --fluid-services-tablet: clamp(41px,5.2vw,55px);
  --fluid-cta-tablet: clamp(34px,4vw,48px);
  --fluid-home-old-mobile: clamp(52px,12.8vw,75px);
  --fluid-sections-mobile: clamp(38px,10.5vw,52px);
  --fluid-place-mobile: clamp(45px,11.6vw,61px);
  --fluid-cta-mobile: clamp(35px,9vw,49px);
  --fluid-article-mobile: clamp(42px,10vw,64px);
  --fluid-home-title: clamp(65px,6.3vw,100px);
  --fluid-home-laptop: clamp(61px,7.2vw,82px);
  --fluid-home-tablet: clamp(57px,9.8vw,83px);
  --fluid-home-mobile: clamp(51px,12.7vw,71px);
  --fluid-page-title: clamp(57px,6.3vw,96px);
  --fluid-page-lead: clamp(18px,2vw,24px);
  --fluid-page-tablet: clamp(54px,9vw,78px);
  --fluid-page-mobile: clamp(48px,11vw,67px);
  --fluid-contact-title: clamp(64px,6.3vw,94px);
  --fluid-contact-email: clamp(25px,2.5vw,40px);
  --fluid-contact-tile: clamp(16px,1.7vw,22px);
  --fluid-contact-section: clamp(43px,4.6vw,67px);
  --fluid-contact-card: clamp(27px,3vw,39px);
  --fluid-contact-title-tablet: clamp(44px,5.8vw,53px);
  --fluid-contact-email-tablet: clamp(20px,2.7vw,24px);
  --fluid-contact-title-mobile: clamp(48px,8.7vw,72px);
  --fluid-contact-email-mobile: clamp(24px,5vw,36px);
  --fluid-contact-title-small: clamp(47px,12vw,58px);
  --fluid-editor-preview: clamp(42px,6.5vw,72px);

  /* ===== LAYOUT / RAZMACI / RADJUSI ===== */
  --container-max: 1412px;
  --container-gutter: clamp(22px, 4.5833vw, 66px);
  --container-gutter-tablet: 28px;
  --container-gutter-mobile: 22px;
  --container-gutter-small: 18px;
  --hero-height-desktop: 720px;
  --button-height: 60px;
  --projects-section-top: 100px;
  --cta-height-desktop: 258px;
  --projects-section-bottom: 105px;
  --projects-section-top-mobile: 75px;
  --projects-section-bottom-mobile: 65px;
  --contact-details-spacing: 112px;
  --contact-details-spacing-mobile: 78px;
  --contact-location-spacing: 95px;
  --contact-location-spacing-mobile: 70px;
  --card-gap-home: 21px;
  --card-gap-contact: 20px;
  --header-height: 85px;
  --header-height-wide: 89px;
  --radius-control: 0px;
  --radius-card: 0px;
  /* Projekti — arhiva i pojedinačni radovi. */
  --project-archive-hero-height: 475px;
  --project-single-hero-height: 700px;
  --project-card-height: 510px;
  --project-card-gap: 20px;
  --project-detail-gallery-height: 570px;
  /* Single projekt: vertikalna ritmika i razmak galerija → CTA. */
  --project-description-leading: 1.46;
  --project-description-paragraph-gap: 5px;
  --project-location-min-height: 80px;
  --project-single-bottom-gap: 38px;
  --project-single-bottom-gap-mobile: 20px;
  --project-overlay: #0e0714;
}

/* Jedinstvena promjena širine containera na svim stranicama. */
@media (max-width:900px){ :root { --container-gutter:var(--container-gutter-tablet); } }
@media (max-width:620px){ :root { --container-gutter:var(--container-gutter-mobile); } }
@media (max-width:360px){ :root { --container-gutter:var(--container-gutter-small); } }