/*
 * IT361 design tokens.
 * Geometry rule taken from the logo: the mark has no rounded rectangles –
 * only straight monoline strokes, true circles and the red full stop.
 * So radii are either 0 or a full circle; nothing in between.
 */
:root {
  /* Brand (sampled from it361_logo.png): red, graphite, white – nothing else */
  --c-graphite: #3a3a3c;
  --c-red: #b51f25;
  --c-white: #ffffff;

  /* Neutral steps of the graphite (no hue of their own) */
  --c-ink: #1f1f21;
  --c-ink-soft: #4a4a4d; /* 8.9:1 on white */
  --c-graphite-soft: #6c6c70; /* indices, secondary headline – 5.2:1 on white */
  --c-paper: var(--c-white);
  --c-paper-2: #f1f1f1;
  --c-mist: #efefef; /* quiet alternate surface (process) */
  --c-night: #2a2a2c; /* dark surface – deepened graphite */
  --c-night-2: #343436;
  --c-on-night: #f4f4f4;
  --c-on-night-soft: #b3b3b6; /* 6.8:1 on night */
  --c-graphite-light: #9a9a9e; /* indices on dark surfaces */

  /* Semantic */
  --bg: var(--c-paper);
  --fg: var(--c-ink);
  --fg-soft: var(--c-ink-soft);
  --line: rgba(58, 58, 60, 0.2);
  --line-strong: var(--c-graphite);
  --accent: var(--c-red);
  --focus: var(--c-red);

  /* Type */
  --f-display: 'Urbanist', 'Avenir Next', 'Segoe UI', sans-serif;
  --f-text: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale (min @360px → max @1440px) */
  --t-hero: clamp(2.5rem, 1.6rem + 3.9vw, 5.1rem);
  --t-h1: clamp(2.25rem, 1.6rem + 2.9vw, 4.25rem);
  --t-h2: clamp(1.85rem, 1.45rem + 1.8vw, 3.1rem);
  --t-h3: clamp(1.35rem, 1.2rem + 0.65vw, 1.8rem);
  --t-lead: clamp(1.1rem, 1.03rem + 0.3vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.55;

  /* Spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section: clamp(72px, 4rem + 6vw, 160px);

  /* Grid */
  --max: 1360px;
  --gutter: clamp(16px, 2.2vw, 32px);
  --margin: clamp(16px, 5vw, 72px);

  /* Radii */
  --r-0: 0;
  --r-circle: 50%;

  /* Line weights – the hairline and the logo stroke */
  --hair: 1px;
  --stroke: 3px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 700ms;

  --header-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}