/* ============================================================
   G&T Talent Radar — Brand tokens
   Extracted from live gt.hr (Hostinger Website Builder / Zyro)
   Do not invent new colours here; derive from these.
   ============================================================ */

:root {
  /* --- Core palette (from gt.hr) --- */
  --ink:        #0d141a;  /* nav links, headings, body text */
  --charcoal:   #21272e;  /* dark section background (hero) */
  --slate:      #617da1;  /* accent — the one non-neutral in the brand */
  --white:      #ffffff;
  --btn:        #000000;  /* primary button */
  --btn-hover:  #1d1e20;

  /* --- Derived neutrals (tinted toward charcoal, never pure grey) --- */
  --paper:      #f7f8f9;  /* alternating section background */
  --card:       #ffffff;
  --line:       #e4e7ea;  /* hairline borders */
  --line-strong:#ced4da;
  --muted:      #5b6672;  /* secondary text on light */
  --muted-dark: #a3adb8;  /* secondary text on charcoal */

  /* --- Slate tints, for chips/filters --- */
  --slate-050:  #f2f5f9;
  --slate-100:  #e4eaf1;
  --slate-700:  #4a627f;

  /* --- Typography --- */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale — clamp() so mobile never needs a media query */
  --t-hero:   clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  --t-h2:     clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  --t-h3:     clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-body:   1rem;
  --t-small:  0.875rem;
  --t-micro:  0.75rem;

  /* --- Spacing (8px base) --- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2rem;    --s-5: 3rem;   --s-6: 4rem;
  --s-7: 6rem;    --s-8: 8rem;

  /* --- Shape --- */
  --r-card: 12px;
  --r-chip: 999px;
  --r-btn:  999px;   /* pill — matches gt.hr */

  /* Shadows: barely there. Consulting, not SaaS. */
  --shadow-card:  0 1px 2px rgba(13, 20, 26, 0.04);
  --shadow-hover: 0 8px 28px rgba(13, 20, 26, 0.08);
  --shadow-modal: 0 24px 64px rgba(13, 20, 26, 0.24);

  --wrap: 1200px;
  --wrap-narrow: 760px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}