/* ============================================================
   ZANESLJIVI DELAVCI — DESIGN TOKENS
   Foundation: trust-first, grounded, warm. Single primary
   (Industrial Ochre) + muted earth tones. Implement as-is.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- COLOR ---- */
  --color-bg:            #FAF7F2;  /* warm off-white — page background */
  --color-surface:       #FFFFFF;  /* white — stat band, elevated cards */
  --color-text:          #1F1A14;  /* body text — near-black warm */
  --color-text-muted:    #6B5D4E;  /* muted text — meta, captions, desc */
  --color-primary:       #B8732E;  /* industrial ochre — CTAs, links, accents */
  --color-primary-hover: #9A5F24;  /* ochre, darkened ~14% for hover */
  --color-primary-tint:  rgba(184, 115, 46, 0.10); /* icon circles */
  --color-primary-tint-strong: rgba(184, 115, 46, 0.16);
  --color-border:        #E5DDD0;  /* hairline borders */
  --color-border-strong: #D3C7B4;  /* hover / focus rule darken */
  --color-success:       #4F7A4A;  /* muted forest */
  --color-success-tint:  rgba(79, 122, 74, 0.10);
  --color-error:         #A0432B;  /* muted brick */
  --color-error-tint:    rgba(160, 67, 43, 0.08);

  /* ---- TYPE FAMILIES ---- */
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- TYPE SCALE ----  size / line-height / weight
     H1 + stat numbers use --font-display. Everything else --font-body. */
  --type-h1-size: clamp(40px, 5vw, 60px);
  --type-h1-lh: 1.05;
  --type-h1-weight: 600;

  --type-h2-size: clamp(28px, 3.4vw, 38px);
  --type-h2-lh: 1.15;
  --type-h2-weight: 600;

  --type-h3-size: 20px;
  --type-h3-lh: 1.3;
  --type-h3-weight: 600;

  --type-body-large-size: 18px;
  --type-body-large-lh: 1.6;

  --type-body-size: 16px;
  --type-body-lh: 1.6;

  --type-small-size: 14px;
  --type-small-lh: 1.5;

  --type-caption-size: 13px;
  --type-caption-lh: 1.4;
  --type-caption-weight: 500;

  --type-stat-size: clamp(52px, 6vw, 64px);
  --type-stat-lh: 1.0;

  /* ---- SPACING (8px base) ---- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* section vertical padding */
  --section-pad: clamp(56px, 9vw, 112px);

  /* ---- RADIUS ---- */
  --radius-0: 0px;
  --radius-sm: 4px;   /* chips */
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* cards */

  /* ---- BORDER ---- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);

  /* ---- SHADOW (kept extremely light — one elevation only) ---- */
  --shadow-card: 0 1px 2px rgba(31, 26, 20, 0.06);

  /* ---- MOTION ---- */
  --duration-fast: 120ms;
  --duration-default: 180ms;
  --easing-default: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- LAYOUT ---- */
  --container-max: 1180px;
  --container-narrow: 720px;
}

/* ============================================================
   BASE RESET + PRIMITIVES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

img { max-width: 100%; display: block; }

.h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  font-weight: var(--type-h1-weight);
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-body);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--type-h2-weight);
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-body);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--type-h3-weight);
}
.body-large { font-size: var(--type-body-large-size); line-height: var(--type-body-large-lh); }
.body { font-size: var(--type-body-size); line-height: var(--type-body-lh); }
.small { font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: var(--type-caption-weight);
}
.text-muted { color: var(--color-text-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.container-narrow { max-width: var(--container-narrow); }

/* utility: visually hidden but accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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