/* ==========================================================================
   IC DESIGN SYSTEM v1.0 — 2026-04-26
   Tokens condivisi tra le 4 versioni (mobile, desktop, kiosk-h, kiosk-v)
   e la sezione JobCoin. Singola fonte di verità per palette, tipografia,
   spaziature, raggi, ombre, motion.
   ========================================================================== */

:root {
  /* ----- BRAND PALETTE ----- */
  --ic-navy:        #0b2340;   /* sfondo dark/header brand */
  --ic-navy-deep:   #06182d;   /* sfondo deepest (kiosk) */
  --ic-navy-soft:   #13355c;   /* gradient pair */
  --ic-blue:        #1e3a8a;   /* CTA primaria (Portami, link forti) */
  --ic-blue-dark:   #1e40af;   /* CTA hover */
  --ic-cyan:        #1465a3;   /* link secondari, accenti freddi */
  --ic-gold:        #ffcc33;   /* highlight, eyebrow, kiosk accent */
  --ic-gold-deep:   #c89b3c;   /* gold ridotto */
  --ic-coral:       #e35d4d;   /* alert / eventi caldi */
  --ic-mint:        #15803d;   /* success / open */

  /* ----- NEUTRI ----- */
  --ic-ink:         #0b1220;   /* testo primario light bg */
  --ic-muted:       #4a5568;   /* testo secondario */
  --ic-line:        #e6e2d6;   /* divider chiaro */
  --ic-line-soft:   rgba(11,35,64,.08);
  --ic-paper:       #fbf9f4;   /* sfondo sezioni warm */
  --ic-paper-cool:  #f5f7fb;   /* sfondo sezioni cool */
  --ic-elev:        #ffffff;   /* card / modal */

  /* ----- SEMANTIC SURFACES ----- */
  --ic-surface-bg:        var(--ic-paper);
  --ic-surface-card:      var(--ic-elev);
  --ic-surface-overlay:   rgba(11,35,64,.92);
  --ic-surface-glass:     rgba(255,255,255,.85);

  /* ----- TIPOGRAFIA ----- */
  --ic-font-display:  'Anton', 'Oswald', 'Bricolage Grotesque', system-ui, sans-serif;
  --ic-font-headline: 'Oswald', 'Bricolage Grotesque', system-ui, sans-serif;
  --ic-font-body:     'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --ic-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* type scale (clamp per fluidità) */
  --ic-fs-xs:   clamp(11px, 0.7rem + 0.1vw, 12px);
  --ic-fs-sm:   clamp(13px, 0.8rem + 0.1vw, 14px);
  --ic-fs-md:   clamp(15px, 0.95rem + 0.1vw, 16px);
  --ic-fs-lg:   clamp(17px, 1.05rem + 0.2vw, 20px);
  --ic-fs-xl:   clamp(20px, 1.2rem + 0.3vw, 24px);
  --ic-fs-2xl:  clamp(24px, 1.4rem + 0.5vw, 32px);
  --ic-fs-3xl:  clamp(32px, 1.8rem + 1vw, 48px);
  --ic-fs-4xl:  clamp(40px, 2rem + 2vw, 72px);
  --ic-fs-display: clamp(56px, 3rem + 4vw, 128px);

  /* ----- SPACING ----- */
  --ic-sp-1:  4px;
  --ic-sp-2:  8px;
  --ic-sp-3:  12px;
  --ic-sp-4:  16px;
  --ic-sp-5:  20px;
  --ic-sp-6:  24px;
  --ic-sp-8:  32px;
  --ic-sp-10: 40px;
  --ic-sp-12: 48px;
  --ic-sp-16: 64px;
  --ic-sp-20: 80px;
  --ic-sp-24: 96px;

  /* ----- BORDER RADIUS ----- */
  --ic-r-xs:  4px;
  --ic-r-sm:  6px;
  --ic-r-md:  10px;
  --ic-r-lg:  14px;
  --ic-r-xl:  20px;
  --ic-r-2xl: 28px;
  --ic-r-full: 999px;

  /* ----- SHADOW ----- */
  --ic-sh-xs: 0 1px 2px rgba(11,35,64,.06);
  --ic-sh-sm: 0 2px 6px rgba(11,35,64,.08);
  --ic-sh-md: 0 6px 16px rgba(11,35,64,.10);
  --ic-sh-lg: 0 14px 32px rgba(11,35,64,.14);
  --ic-sh-xl: 0 24px 56px rgba(11,35,64,.20);
  --ic-sh-glow-gold: 0 0 32px rgba(255,204,51,.35);

  /* ----- MOTION ----- */
  --ic-tr-fast:  120ms cubic-bezier(.4,0,.2,1);
  --ic-tr-base:  200ms cubic-bezier(.4,0,.2,1);
  --ic-tr-slow:  400ms cubic-bezier(.4,0,.2,1);
  --ic-ease-out: cubic-bezier(.16,1,.3,1);

  /* ----- LAYOUT ----- */
  --ic-content-w: 1280px;
  --ic-content-px: clamp(16px, 4vw, 48px);
}

/* ----- DARK MODE OVERRIDES ----- */
:root.force-dark,
:root[data-theme="dark"] {
  --ic-surface-bg:    #0a1628;
  --ic-surface-card:  rgba(255,255,255,.04);
  --ic-line:          rgba(255,255,255,.08);
  --ic-ink:           #f5f5f5;
  --ic-muted:         rgba(255,255,255,.7);
}

/* ==========================================================================
   PRIMITIVE COMPONENTS (riutilizzabili in tutte le 4 versioni)
   ========================================================================== */

/* ----- BUTTONS ----- */
.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ic-sp-2);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--ic-r-md);
  font: 700 var(--ic-fs-md)/1.2 var(--ic-font-body);
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ic-tr-base), transform var(--ic-tr-fast), box-shadow var(--ic-tr-base);
}
.ic-btn--primary {
  background: var(--ic-blue);
  color: #fff;
  box-shadow: var(--ic-sh-xs);
}
.ic-btn--primary:hover { background: var(--ic-blue-dark); transform: translateY(-1px); box-shadow: var(--ic-sh-md); }

.ic-btn--gold {
  background: var(--ic-gold);
  color: var(--ic-navy);
  box-shadow: var(--ic-sh-xs);
}
.ic-btn--gold:hover { background: #ffd859; transform: translateY(-1px); box-shadow: var(--ic-sh-md); }

.ic-btn--ghost {
  background: transparent;
  color: var(--ic-navy);
  border: 1.5px solid var(--ic-line);
}
.ic-btn--ghost:hover { background: var(--ic-paper); border-color: var(--ic-navy); }

.ic-btn--lg { padding: 16px 32px; font-size: var(--ic-fs-lg); border-radius: var(--ic-r-lg); }
.ic-btn--xl { padding: 22px 40px; font-size: var(--ic-fs-xl); border-radius: var(--ic-r-lg); min-height: 64px; }

/* ----- CARDS ----- */
.ic-card {
  background: var(--ic-surface-card);
  border: 1px solid var(--ic-line-soft);
  border-radius: var(--ic-r-lg);
  padding: var(--ic-sp-5);
  box-shadow: var(--ic-sh-xs);
  transition: border-color var(--ic-tr-base), box-shadow var(--ic-tr-base), transform var(--ic-tr-fast);
}
.ic-card:hover { border-color: rgba(11,35,64,.18); box-shadow: var(--ic-sh-md); }

/* ----- BADGES ----- */
.ic-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--ic-r-xs);
  font: 700 11px/1 var(--ic-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ic-badge--gold { background: rgba(255,204,51,.14); color: var(--ic-gold-deep); }
.ic-badge--cyan { background: rgba(20,101,163,.10); color: var(--ic-cyan); }
.ic-badge--coral { background: rgba(227,93,77,.12); color: var(--ic-coral); }
.ic-badge--mint { background: rgba(21,128,61,.12); color: var(--ic-mint); }

/* ----- EYEBROW (label sopra titoli) ----- */
.ic-eyebrow {
  font: 600 var(--ic-fs-xs)/1 var(--ic-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ic-cyan);
  display: inline-block;
  margin-bottom: var(--ic-sp-3);
}

/* ----- TITOLI ----- */
.ic-h-display {
  font: 400 var(--ic-fs-display)/.92 var(--ic-font-display);
  color: var(--ic-navy);
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
}
.ic-h1 {
  font: 600 var(--ic-fs-3xl)/1.05 var(--ic-font-headline);
  color: var(--ic-navy);
  letter-spacing: -.01em;
  margin: 0;
}
.ic-h2 {
  font: 600 var(--ic-fs-2xl)/1.15 var(--ic-font-headline);
  color: var(--ic-navy);
  margin: 0;
}
.ic-lede {
  font: 400 var(--ic-fs-lg)/1.55 var(--ic-font-body);
  color: var(--ic-muted);
  margin: 0;
}

/* ----- DIVIDER ----- */
.ic-divider {
  height: 1px;
  background: var(--ic-line);
  border: 0;
  margin: var(--ic-sp-6) 0;
}

/* ----- VISUALMENTE NASCOSTO MA ACCESSIBILE ----- */
.ic-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;
}

/* ----- SCROLLBAR DISCRETA (kiosk) ----- */
.ic-scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.ic-scroll-thin::-webkit-scrollbar-thumb { background: rgba(11,35,64,.2); border-radius: 999px; }

/* ----- REDUCED MOTION ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}