/* Oblikovni žetoni: postavitev po domači strani bricksbuilder.io, barve in pisave po nordqr.com (Inter, PT Serif za glavne naslove).
   Sivine so nordQR-jeve (zinc), glavna barva je njihova modra, temni pasovi imajo njihov črno-vijoličen preliv. */

:root {
  --color-ink: #27272a;
  --color-heading: #27272a;
  --color-body: #52525b;
  --color-muted: #71717a;
  --color-subtle: #a1a1aa;
  --color-line: #e4e4e7;
  --color-line-strong: #d4d4d8;
  --color-surface: #f4f4f5;
  --color-surface-2: #fafafa;
  --color-white: #fff;
  --color-night: #131316;
  --color-night-2: #27272a;
  --color-night-line: #3f3f46;
  --color-night-text: #fafafa;
  --color-night-muted: #a1a1aa;

  --color-brand: #4a4ad8;
  --color-brand-dark: #3d3dcd;
  --color-brand-darker: #2e2ec2;
  --color-brand-light: #e8e8ff;
  --color-brand-on-dark: #c7c7ff;
  --color-accent: var(--color-brand);
  --color-accent-strong: var(--color-brand-dark);
  --color-form-error: #c62828;
  --color-success-text: #2e7d32;

  /* Črno-vijoličen preliv po nordqr.com: na temnih pasovih in v znaku logotipa. */
  --gradient-night: linear-gradient(160deg, #131316 0%, #181219 45%, #3d0a2e 80%, #660047 115%);
  --gradient-mark: linear-gradient(135deg, #660047 0%, #2a0f25 55%, #131316 100%);
  --gradient-hero: linear-gradient(#fff 10%, #eaeaff 85%);

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --font-quote: var(--font-sans);

  --text-body: 18px;
  --text-sm: 16px;
  --text-xs: 14px;
  --leading-body: 1.7;
  --text-h1: clamp(40px, 5.2vw, 76.8px);
  --leading-h1: 1.05;
  --text-h2: clamp(30px, 3.4vw, 48px);
  --leading-h2: 1.12;
  --text-h3: clamp(22px, 2.2vw, 30px);
  --leading-h3: 1.3;
  --text-lead: clamp(18px, 1.6vw, 20px);
  --text-stat: clamp(40px, 4vw, 52px);

  --container: 1280px;
  --gutter: 64px;
  --pad-y: 96px;
  --header-h: 72px;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-section: 48px;

  --shadow-row: 0 4px 8px -4px rgba(16, 24, 40, 0.15);
  --shadow-card: 0 10px 10px 5px rgba(19, 19, 22, 0.08);
  --shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 2px 2px rgba(0, 0, 0, 0.04);
  --focus-ring: 2px solid var(--color-brand);
  --focus-ring-offset: 3px;
  --transition-base: 0.25s ease;

  --z-skip: 10000;
  --z-header: 1000;
  --z-nav: 999;

  interpolate-size: allow-keywords;
}

@media (max-width: 1024px) {
  :root { --gutter: 32px; --pad-y: 80px; --header-h: 64px; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; --pad-y: 64px; --radius-section: 32px; }
}