/* Hallmark · custom theme · vibe: "sabbia, mare turchese, macchia, sole del pomeriggio"
 * paper oklch(96.4% 0.016 84) · accent oklch(50% 0.09 205) turchese
 * display: Fraunces (SOFT 100) · body: Instrument Sans
 * axes: light / high-contrast-serif / cool
 * Il colore principale dell'interfaccia appartiene alle milestone (M0–M7).
 */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Sabbia: superfici e inchiostro */
  --color-paper:        oklch(96.4% 0.016 84);
  --color-paper-2:      oklch(93.8% 0.021 82);
  --color-paper-3:      oklch(90.6% 0.025 80);
  --color-surface:      oklch(98.7% 0.008 86);
  --color-rule:         oklch(88% 0.02 80);
  --color-rule-strong:  oklch(79% 0.024 76);
  --color-neutral:      oklch(57% 0.02 68);
  --color-muted:        oklch(45% 0.02 60);
  --color-ink-2:        oklch(33% 0.022 55);
  --color-ink:          oklch(24% 0.022 52);
  --color-on-ink:       oklch(97% 0.012 84);

  /* Accento: turchese del mare, per link, focus e azioni primarie */
  --color-accent:       oklch(50% 0.09 205);
  --color-accent-soft:  oklch(92.5% 0.03 200);
  --color-accent-on-ink: oklch(82% 0.09 196);
  --color-focus:        oklch(56% 0.13 212);
  --color-danger:       oklch(50% 0.15 28);
  --color-danger-soft:  oklch(94% 0.03 30);

  /* Ombre: modificatori trasparenti dell'inchiostro caldo */
  --color-shadow:       oklch(35% 0.04 60 / 0.10);
  --color-shadow-2:     oklch(35% 0.04 60 / 0.18);
  --color-backdrop:     oklch(30% 0.03 60 / 0.32);

  /* Milestone: fill (cerchi, nodi), ink (testo su sabbia), soft (fondi) */
  --m0: oklch(70% 0.135 70);   --m0-ink: oklch(48% 0.1 62);   --m0-soft: oklch(93% 0.045 80);   /* ocra */
  --m1: oklch(66% 0.15 32);    --m1-ink: oklch(50% 0.14 30);  --m1-soft: oklch(93% 0.035 36);   /* corallo */
  --m2: oklch(63% 0.105 200);  --m2-ink: oklch(45% 0.08 205); --m2-soft: oklch(93% 0.03 200);   /* turchese */
  --m3: oklch(57% 0.12 315);   --m3-ink: oklch(45% 0.11 315); --m3-soft: oklch(93.5% 0.025 315); /* mirto */
  --m4: oklch(56% 0.13 256);   --m4-ink: oklch(45% 0.12 258); --m4-soft: oklch(93.5% 0.028 256); /* blu mare */
  --m5: oklch(61% 0.11 150);   --m5-ink: oklch(44% 0.08 152); --m5-soft: oklch(93% 0.035 146);  /* macchia */
  --m6: oklch(67% 0.14 358);   --m6-ink: oklch(49% 0.13 0);   --m6-soft: oklch(93.5% 0.03 358); /* fenicottero */
  --m7: oklch(65% 0.1 112);    --m7-ink: oklch(45% 0.07 115); --m7-soft: oklch(93% 0.04 110);   /* ulivo */

  /* Tipografia */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.375rem;
  --text-display: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem);
  --text-numeral: clamp(4rem, 2.8rem + 4vw, 6.5rem);

  /* Spazi (scala 4 pt) */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --rule: 1px solid var(--color-rule);

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* Livelli */
  --z-rail: 10;
  --z-fab: 20;
  --z-avvisi: 3000;
  --z-palette: 3100;
  --z-festa: 3200;

  --rail: 264px;
}

/* Ogni elemento eredita il colore della sua milestone */
.m0 { --m: var(--m0); --m-ink: var(--m0-ink); --m-soft: var(--m0-soft); }
.m1 { --m: var(--m1); --m-ink: var(--m1-ink); --m-soft: var(--m1-soft); }
.m2 { --m: var(--m2); --m-ink: var(--m2-ink); --m-soft: var(--m2-soft); }
.m3 { --m: var(--m3); --m-ink: var(--m3-ink); --m-soft: var(--m3-soft); }
.m4 { --m: var(--m4); --m-ink: var(--m4-ink); --m-soft: var(--m4-soft); }
.m5 { --m: var(--m5); --m-ink: var(--m5-ink); --m-soft: var(--m5-soft); }
.m6 { --m: var(--m6); --m-ink: var(--m6-ink); --m-soft: var(--m6-soft); }
.m7 { --m: var(--m7); --m-ink: var(--m7-ink); --m-soft: var(--m7-soft); }