:root {
  color-scheme: light;

  /* Tipografia: serif editoriale che dialoga con il wordmark, sans per lettura e interfaccia. */
  --font-display:
    "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-body);

  /* Palette derivata dal marchio Molitierno: teal profondo, oro champagne, avorio caldo. */
  --color-primary: #0f302f;
  --color-primary-deep: #071d1c;
  --color-primary-soft: #1b4b48;
  --color-primary-contrast: #f7f3ea;
  --color-gold: #d8c38c;
  --color-gold-bright: #ebdcb0;
  --color-gold-deep: #7d5f25;
  --color-background: #f6f2e9;
  --color-text: #0e1f1e;
  --color-muted: #566461;
  --color-surface: #e9e2d3;
  --color-surface-light: #fcfaf5;
  --color-sage: #7c8c85;
  --color-border: #d4cbb9;
  --color-border-strong: #6f7b76;
  --color-success: #2f6b52;
  --color-warning: #8a641f;
  --color-error: #a33b32;
  --color-focus: #7d5f25;
  --color-overlay: rgb(7 29 28 / 0.62);

  --text-hero: clamp(2.75rem, 6.1vw, 6.25rem);
  --text-h1: clamp(2.5rem, 5.4vw, 5.25rem);
  --text-h2: clamp(2rem, 4vw, 3.75rem);
  --text-h3: clamp(1.375rem, 2vw, 1.875rem);
  --text-body-lg: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-small: 0.875rem;
  --text-label: 0.6875rem;
  --leading-display: 0.96;
  --leading-h1: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --leading-small: 1.45;
  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-body: -0.004em;
  --tracking-label: 0.16em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-52: 13rem;
  --space-section-compact: clamp(3.5rem, 6vw, 5.5rem);
  --space-section-standard: clamp(5rem, 9vw, 8rem);
  --space-section-generous: clamp(6.5rem, 12vw, 11rem);
  --page-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --page-max-width: 90rem;
  --prose-max-width: 66ch;
  --header-height: 4.5rem;

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-material: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-reduced: 120ms;
  --duration-micro: 200ms;
  --duration-nav: 320ms;
  --duration-route-enter: 360ms;
  --duration-entrance: 640ms;
  --duration-image-mask: 620ms;
  --duration-portfolio-clip: 700ms;
  --duration-exit: 220ms;
  --stagger-line: 70ms;
  --stagger-child: 80ms;

  --shadow-1:
    0 1px 2px rgb(7 29 28 / 0.06), 0 8px 24px -20px rgb(7 29 28 / 0.28);
  --shadow-2:
    0 2px 4px rgb(7 29 28 / 0.07), 0 16px 40px -24px rgb(7 29 28 / 0.36);
  --shadow-3:
    0 4px 8px rgb(7 29 28 / 0.09), 0 28px 72px -32px rgb(7 29 28 / 0.42);
  --shadow-focus:
    0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus);

  --radius-control: 0.25rem;
  --radius-panel: 0.5rem;
  --soglia-cut: clamp(1.75rem, 4vw, 4.5rem);
  --control-cut: 0.625rem;
  --clip-soglia: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--soglia-cut)),
    calc(100% - var(--soglia-cut)) 100%,
    0 100%
  );
  --clip-soglia-inverse: polygon(
    0 0,
    calc(100% - var(--soglia-cut)) 0,
    100% var(--soglia-cut),
    100% 100%,
    0 100%
  );
  --clip-control: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--control-cut)),
    calc(100% - var(--control-cut)) 100%,
    0 100%
  );
  --grain-opacity: 0.03;
}

@keyframes soglia-enter {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skeleton-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-nav: var(--duration-reduced);
    --duration-route-enter: var(--duration-reduced);
    --duration-entrance: var(--duration-reduced);
    --duration-image-mask: var(--duration-reduced);
    --duration-portfolio-clip: var(--duration-reduced);
  }
}