/*
 * fd-theme-2 - base.css
 * Token di design, reset, stili globali e classi di servizio minime.
 */

/* ==========================================================================
   Token di design
   ========================================================================== */
:root {
  /* Famiglie di font */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Colori: rossi */
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);

  /* Colori: arancioni */
  --color-orange-300: oklch(83.7% .128 66.29);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-900: oklch(40.8% .123 38.172);
  --color-orange-950: oklch(26.6% .079 36.259);

  /* Colori: ambra */
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-amber-500: oklch(76.9% .188 70.08);
  --color-amber-950: oklch(27.9% .077 45.635);

  /* Colori: gialli */
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-yellow-500: oklch(79.5% .184 86.047);

  /* Colori: verdi */
  --color-green-300: oklch(87.1% .15 154.449);
  --color-green-400: oklch(79.2% .209 151.711);
  --color-green-500: oklch(72.3% .219 149.579);

  /* Colori: smeraldo */
  --color-emerald-300: oklch(84.5% .143 164.978);
  --color-emerald-400: oklch(76.5% .177 163.223);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-emerald-900: oklch(37.8% .077 168.94);
  --color-emerald-950: oklch(26.2% .051 172.552);

  /* Colori: teal */
  --color-teal-200: oklch(91% .096 180.426);
  --color-teal-300: oklch(85.5% .138 181.071);

  /* Colori: ciano */
  --color-cyan-300: oklch(86.5% .127 207.078);
  --color-cyan-400: oklch(78.9% .154 211.53);
  --color-cyan-500: oklch(71.5% .143 215.221);
  --color-cyan-950: oklch(30.2% .056 229.695);

  /* Colori: blu */
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-blue-900: oklch(37.9% .146 265.522);
  --color-blue-950: oklch(28.2% .091 267.935);

  /* Colori: indaco */
  --color-indigo-300: oklch(78.5% .115 274.713);
  --color-indigo-400: oklch(67.3% .182 276.935);
  --color-indigo-500: oklch(58.5% .233 277.117);

  /* Colori: viola */
  --color-purple-300: oklch(82.7% .119 306.383);
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-purple-500: oklch(62.7% .265 303.9);
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-purple-900: oklch(38.1% .176 304.987);
  --color-purple-950: oklch(29.1% .149 302.717);

  /* Colori: rosa */
  --color-pink-400: oklch(71.8% .202 349.761);

  /* Colori: slate */
  --color-slate-800: oklch(27.9% .041 260.031);
  --color-slate-900: oklch(20.8% .042 265.755);

  /* Colori: neutri */
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);

  /* Colori: bianco e nero */
  --color-black: #000;
  --color-white: #fff;

  /* Spaziatura base: 1 unita = 0.25rem */
  --spacing: .25rem;

  /* Larghezze contenitore */
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  /* Dimensioni del testo e interlinea */
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;

  /* Pesi del font */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Spaziatura tra lettere */
  --tracking-tighter: -.05em;
  --tracking-tight: -.025em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;

  /* Interlinea */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;

  /* Raggi */
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  /* Ombre dei filtri drop-shadow */
  --drop-shadow-sm: 0 1px 2px #00000026;
  --drop-shadow-lg: 0 4px 4px #00000026;
  --drop-shadow-xl: 0 9px 7px #0000001a;
  --drop-shadow-2xl: 0 25px 25px #00000026;

  /* Easing */
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Animazioni (keyframes in fondo al file) */
  --animate-ping: fd-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  --animate-pulse: fd-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;

  /* Blur */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* Transizioni di default e font di default */
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
::before,
::after,
::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html,
:host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family);
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: var(--default-mono-font-family);
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:-moz-focusring {
  outline: auto;
}

progress {
  vertical-align: baseline;
}

summary {
  display: list-item;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  vertical-align: middle;
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Controlli dei form: ereditano il font e perdono l'aspetto nativo */
button,
input,
select,
optgroup,
textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
  margin-inline-end: 4px;
  appearance: button;
}

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

::placeholder {
  opacity: 1;
  color: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

textarea {
  resize: vertical;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

:-moz-ui-invalid {
  box-shadow: none;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]) {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* ==========================================================================
   Stili globali
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-neutral-950);
  color: var(--color-neutral-200);
  font-family: var(--font-sans);
  overflow-x: clip;
}

/* Selezione testo (anche sui discendenti) */
body::selection,
body ::selection {
  background-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
}

/* Blocco dello scroll con menu mobile aperto */
body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   Classi di servizio
   ========================================================================== */

/* Contenitore centrato: larghezza massima 80rem, margini laterali 1.5rem */
.fd-container {
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Testo solo per screen reader */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Testo con gradiente. Default blu-400 -> indaco-500 (da sinistra a destra).
 * Per altri colori ridefinire --fd-gradient-stops sull'elemento,
 * es. --fd-gradient-stops: var(--color-emerald-400), var(--color-teal-300), var(--color-blue-400);
 */
.fd-gradient-text {
  color: transparent;
  background-image: linear-gradient(to right in oklab, var(--fd-gradient-stops, var(--color-blue-400), var(--color-indigo-500)));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Icone SVG inline: 1em di default, varianti 16px e 20px */
.fd-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.fd-icon--sm {
  width: 1rem;
  height: 1rem;
}

.fd-icon--md {
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   Animazioni (keyframes con prefisso fd-; usare con var(--animate-*))
   ========================================================================== */
@keyframes fd-ping {
  75%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes fd-pulse {
  50% {
    opacity: 0.5;
  }
}