/*
 * Design tokens. Loaded first so every other stylesheet can use them.
 * Brand palette carried over from the previous Zagreb Bites identity.
 */

:root {
	/* Brand colours */
	--zgb-green:       #45b39c;
	--zgb-green-dark:  #2f8a78;
	--zgb-blue:        #2993c0;
	--zgb-blue-dark:   #1f7398;
	--zgb-red:         #e05b49;
	--zgb-black:       #222222;

	/* Neutrals */
	--zgb-ink:         #222222;
	--zgb-ink-soft:    #4a4a4a;
	--zgb-muted:       #6d6d6d;
	--zgb-line:        #e6e6e6;
	--zgb-bg:          #ffffff;
	--zgb-bg-alt:      #f6f8f7;
	--zgb-bg-dark:     #1d2422;

	/* Semantic */
	--zgb-primary:     var(--zgb-green);
	--zgb-primary-dark:var(--zgb-green-dark);
	--zgb-accent:      var(--zgb-red);
	--zgb-link:        var(--zgb-blue);

	/* Typography */
	--zgb-font-head:  'Poppins', system-ui, sans-serif;
	--zgb-font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--zgb-fs-base:    1rem;        /* 16px */
	--zgb-fs-sm:      0.875rem;
	--zgb-fs-lg:      1.25rem;
	--zgb-fs-h1:      clamp(2rem, 4vw + 1rem, 3.25rem);
	--zgb-fs-h2:      clamp(1.5rem, 2vw + 1rem, 2.25rem);
	--zgb-fs-h3:      clamp(1.15rem, 1vw + 0.9rem, 1.5rem);
	--zgb-lh:         1.6;

	/* Spacing scale */
	--zgb-space-1: 0.25rem;
	--zgb-space-2: 0.5rem;
	--zgb-space-3: 0.75rem;
	--zgb-space-4: 1rem;
	--zgb-space-5: 1.5rem;
	--zgb-space-6: 2rem;
	--zgb-space-8: 3rem;
	--zgb-space-10: 4rem;
	--zgb-space-12: 6rem;

	/* Layout */
	--zgb-container:   1200px;
	--zgb-container-narrow: 760px;
	--zgb-gutter:      clamp(1rem, 4vw, 2rem);
	--zgb-radius:      14px;
	--zgb-radius-sm:   8px;
	--zgb-radius-pill: 999px;

	/* Effects */
	--zgb-shadow:    0 6px 24px rgba(0, 0, 0, 0.08);
	--zgb-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.14);
	--zgb-transition: 0.22s ease;

	/* Header height (used for sticky offset) */
	--zgb-header-h: 76px;

	/* ---- Elevated design layer ----
	 * Brand has TWO primaries: green #45b39c (identity/nav/focus) and
	 * blue #2993c0 (action/links/CTA). The names below are kept for backward
	 * compatibility but REMAPPED onto the brand pair + cool neutrals, so the
	 * whole theme stays on-brand. Gold is the ONLY warm accent, reserved for
	 * star ratings + tiny details. */
	--zgb-terracotta:      #2993c0;  /* → blue: action accent           */
	--zgb-terracotta-dark: #1f7398;  /* → blue-dark: buttons/links hover */
	--zgb-gold:            #d6a93a;  /* stars only                       */
	--zgb-gold-soft:       #e7c873;  /* stars on dark                    */
	--zgb-green-soft:      #8fd6c6;  /* light mint: brand accent on dark */
	--zgb-blue-soft:       #93cde6;  /* light sky:  brand accent on dark */
	--zgb-cream:           #eef6f4;  /* cool light neutral (was warm)    */
	--zgb-cream-deep:      #e2efec;
	--zgb-wine:            #134e57;  /* deep teal: dark text / accents   */
	--zgb-bg-deep:         #0e323a;  /* dark petrol: the "dark act"      */
	--zgb-ink-invert:      #eef6f4;

	--zgb-accent-warm: var(--zgb-blue);
	--zgb-rule:      1px solid color-mix(in srgb, var(--zgb-ink) 14%, transparent);
	--zgb-rule-gold: 1px solid color-mix(in srgb, var(--zgb-blue) 35%, transparent);

	/* Display type tier */
	--zgb-fs-display:      clamp(2.6rem, 6vw + 1rem, 5rem);
	--zgb-fs-kicker:       0.78rem;
	--zgb-fs-lede:         clamp(1.1rem, 1vw + 0.95rem, 1.25rem);
	--zgb-lh-tight:        1.06;
	--zgb-tracking-tight:  -0.02em;
	--zgb-tracking-kicker: 0.18em;

	/* Motion */
	--zgb-ease-out:    cubic-bezier(.16, 1, .3, 1);
	--zgb-ease-settle: cubic-bezier(.2, .7, .2, 1);
	--zgb-dur-fast:    .45s;
	--zgb-dur:         .6s;
	--zgb-dur-slow:    .7s;
	--zgb-reveal-stagger: 80ms;

	/* Depth */
	--zgb-radius-lg:   24px;
	--zgb-shadow-soft: 0 2px 8px rgba(19, 50, 58, .07);
	--zgb-shadow-warm: 0 1px 2px rgba(19, 78, 87, .07), 0 10px 30px rgba(19, 78, 87, .14);
	--zgb-glow-warm:   0 20px 60px -20px rgba(41, 147, 192, .38);

	/* Cinematic hero grade (guarantees text contrast over any photo) */
	--zgb-grade:    linear-gradient(180deg, rgba(14,50,58,.15) 0%, rgba(14,50,58,.34) 45%, rgba(19,78,87,.62) 100%);
	--zgb-vignette: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(22,17,14,.45) 100%);
}

/* Breakpoints are used directly in media queries:
   480px / 768px / 992px / 1200px. */