/* Team Kasper — design tokens (colors, typography, spacing, base)
   Estratti da _ds/.../tokens/*.css. Nota: fonts.css NON incluso di proposito —
   si usano i fallback di sistema (Helvetica Neue/Arial) elencati negli stack
   --font-* di typography.css; nessun webfont commerciale servito pubblicamente. */

/* Garantisce che l'attributo HTML "hidden" nasconda sempre l'elemento, anche
   quando una classe dello stesso elemento imposta un display esplicito
   (es. .tk-lightbox{display:grid}, .tk-form__done{display:grid}) — senza
   questa regola il CSS d'autore vince sullo stile utente-agente di default
   e l'elemento "hidden" resta visibile. */
[hidden] { display: none !important; }

/* ============================================================
   Team Kasper — Color tokens
   Brand values extracted directly from the official logo,
   header banner and texture artwork.
   ============================================================ */

:root {
  /* ---- Brand primaries (raw) ---- */
  --tk-blue:    #004f94;  /* primary — extracted from header/texture */
  --tk-red:     #e20613;  /* accent / "TEAM" */
  --tk-orange:  #f29100;  /* accent / "SA" */
  --tk-yellow:  #ffe500;  /* accent / "KASPER" */
  --tk-white:   #ffffff;

  /* ---- Blue scale (primary) ---- */
  --blue-950: #00264a;
  --blue-900: #00335f;
  --blue-800: #003f78;
  --blue-700: #004f94;   /* === brand blue === */
  --blue-600: #0a5fac;
  --blue-500: #1a72c2;
  --blue-400: #4d92d3;
  --blue-300: #84b4e1;
  --blue-200: #b8d3ee;
  --blue-100: #dde9f7;
  --blue-50:  #eef4fb;

  /* ---- Red scale ---- */
  --red-700: #a90510;
  --red-600: #c20512;
  --red-500: #e20613;   /* === brand red === */
  --red-300: #ef6a72;
  --red-100: #fbdcde;
  --red-50:  #fdeef0;

  /* ---- Orange scale ---- */
  --orange-700: #b56d00;
  --orange-600: #d27e00;
  --orange-500: #f29100;  /* === brand orange === */
  --orange-300: #f7b950;
  --orange-100: #fce6c2;
  --orange-50:  #fef5e6;

  /* ---- Yellow scale ---- */
  --yellow-600: #d6c000;
  --yellow-500: #ffe500;  /* === brand yellow === */
  --yellow-300: #ffef66;
  --yellow-100: #fffacc;

  /* ---- Neutrals (cool gray, tuned to the blue) ---- */
  --ink-950: #0e1419;
  --ink-900: #161d24;   /* primary text */
  --ink-800: #29333d;
  --ink-700: #3c4853;
  --ink-600: #525f6b;
  --ink-500: #6c7884;   /* muted text */
  --ink-400: #8d99a4;
  --ink-300: #b2bcc5;
  --ink-200: #d2d9df;
  --ink-150: #e1e6ea;
  --ink-100: #edf0f3;
  --ink-50:  #f5f7f9;
  --paper:   #fbfcfd;

  /* ---- Semantic states ---- */
  --success-500: #1f8a4c;
  --success-100: #d8efe1;
  --warning-500: #f29100;  /* reuse brand orange */
  --warning-100: #fce6c2;
  --danger-500:  #e20613;  /* reuse brand red */
  --danger-100:  #fbdcde;
  --info-500:    #0a5fac;
  --info-100:    #dde9f7;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-brand: var(--tk-white);
  --text-on-accent:var(--ink-900);
  --text-link:     var(--blue-700);
  --text-link-hover: var(--blue-800);

  /* Surfaces */
  --surface-page:       var(--paper);
  --surface-subtle:     var(--ink-50);
  --surface-card:       var(--tk-white);
  --surface-raised:     var(--tk-white);
  --surface-inset:      var(--ink-100);
  --surface-brand:      var(--blue-700);
  --surface-brand-deep: var(--blue-900);
  --surface-invert:     var(--ink-900);

  /* Borders */
  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--blue-700);
  --border-focus:   var(--blue-500);

  /* Accents (interactive) */
  --accent:           var(--blue-700);
  --accent-hover:     var(--blue-800);
  --accent-active:    var(--blue-900);
  --accent-soft:      var(--blue-50);
  --accent-warm:      var(--orange-500);
  --accent-warm-hover:var(--orange-600);
  --accent-red:       var(--red-500);
  --accent-yellow:    var(--yellow-500);

  /* Focus ring */
  --ring: 0 0 0 3px var(--blue-200);
}

/* ============================================================
   Team Kasper — Typography tokens
   Display: Helvetica Inserat / Helvetica Neue LT (Black & Bold)
   Body:    system Helvetica/Arial (no regular-weight OTF supplied)
   ============================================================ */

:root {
  /* ---- Families ---- */
  /* Poster / hero numerals — ultra-fat condensed */
  --font-poster: "Helvetica Inserat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Display & headings */
  --font-display: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Condensed labels, kickers, dense UI */
  --font-cond: "Helvetica Neue LT Cond", "Helvetica Neue", "Arial Narrow", Helvetica, sans-serif;
  /* Compressed — extreme vertical headlines */
  --font-comp: "Helvetica Comp", "Helvetica Neue LT Cond", Helvetica, sans-serif;
  /* Body / UI text — system Helvetica (matches brand) */
  --font-body: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   900;  /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base body */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px */
  --text-6xl: 5.5rem;     /* 88px */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.12em;   /* uppercase kickers / labels */
}

/* ---- Convenience composition classes ---- */
.tk-poster {
  font-family: var(--font-poster);
  font-weight: var(--fw-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.tk-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.tk-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
}
.tk-kicker {
  font-family: var(--font-cond);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-none);
}
.tk-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}
.tk-label {
  font-family: var(--font-cond);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   Team Kasper — Spacing, radii, shadows, motion
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* ---- Radii ---- *
     The brand reads engineered & precise. Corners are crisp:
     small functional radii on controls, square on big panels. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-accent: 4px;   /* the brand's signature accent rule */

  /* ---- Shadows — soft, cool-tinted, never heavy ---- */
  --shadow-xs: 0 1px 2px rgba(0, 38, 74, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 38, 74, 0.08), 0 1px 2px rgba(0, 38, 74, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 38, 74, 0.08), 0 2px 4px rgba(0, 38, 74, 0.05);
  --shadow-lg: 0 12px 28px rgba(0, 38, 74, 0.12), 0 4px 8px rgba(0, 38, 74, 0.06);
  --shadow-xl: 0 24px 56px rgba(0, 38, 74, 0.16);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1400px;
  --gutter: var(--space-5);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-inout: cubic-bezier(0.45, 0, 0.2, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */

  /* ---- Signature diagonal stripe motif (louver slats) ---- *
     45° pinstripes: brand blue field, thin white slats.
     Use as a backdrop accent. Pair the red→orange accent line
     by overlaying a second gradient where wanted. */
  --stripe-angle: 135deg;  /* @kind other */  /* brand louvers run bottom-left → top-right ("/") */
  --stripe-period: 26px;
  --stripes-on-blue: repeating-linear-gradient(
      var(--stripe-angle),
      var(--blue-700) 0,
      var(--blue-700) 13px,
      var(--tk-white) 13px,
      var(--tk-white) 26px);
  --stripes-on-white: repeating-linear-gradient(
      var(--stripe-angle),
      var(--tk-white) 0,
      var(--tk-white) 13px,
      var(--blue-700) 13px,
      var(--blue-700) 26px);
  /* subtle tonal version for section backgrounds */
  --stripes-subtle: repeating-linear-gradient(
      var(--stripe-angle),
      var(--blue-50) 0,
      var(--blue-50) 14px,
      var(--ink-50) 14px,
      var(--ink-50) 28px);
}

/* ============================================================
   Team Kasper — Base element defaults
   Lightweight, opt-in-friendly resets + sensible typography.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); font-weight: var(--fw-bold); }
h4 { font-size: var(--text-xl);  font-weight: var(--fw-bold); }
h5 { font-size: var(--text-lg);  font-weight: var(--fw-bold); }
h6 { font-size: var(--text-sm); font-family: var(--font-cond);
     text-transform: uppercase; letter-spacing: var(--tracking-caps);
     color: var(--text-muted); }

p { margin: 0 0 1em; }

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

strong, b { font-weight: var(--fw-bold); }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-6) 0;
}

small { font-size: var(--text-sm); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

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

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

::selection { background: var(--yellow-300); color: var(--ink-900); }

/* ---- Utility: the signature stripe band ---- */
.tk-stripe-band {
  background-image: var(--stripes-on-blue);
}