/* ==========================================================================
   Magenta — Design tokens
   Layout corporate-minimal ispirato a netstrategy.it, accento Magenta.
   ========================================================================== */

:root {
  /* Brand */
  --m-magenta:        #EC008C;   /* primary accent (brand) */
  --m-magenta-deep:   #B5005F;   /* hover / pressed */
  --m-magenta-soft:   #FFE7F1;   /* tinted backgrounds, badges */

  /* Neutral scale (warm-cool corporate) */
  --m-ink:            #0B0B0F;   /* page text, dark hero, primary */
  --m-ink-2:          #1A1A22;
  --m-ink-3:          #3A3A45;
  --m-grey-1:         #6B6B78;
  --m-grey-2:         #B6B6C0;
  --m-grey-3:         #E4E4EA;   /* dividers */
  --m-canvas:         #F6F6F4;   /* page bg light section */
  --m-paper:          #FFFFFF;
  --m-shadow:         0 10px 30px -12px rgba(11, 11, 15, .18);
  --m-shadow-soft:    0 4px 20px -10px rgba(11, 11, 15, .12);

  /* Semantic */
  --m-bg:             var(--m-paper);
  --m-bg-alt:         var(--m-canvas);
  --m-bg-dark:        var(--m-ink);
  --m-text:           var(--m-ink);
  --m-text-muted:     var(--m-grey-1);
  --m-text-on-dark:   #F6F6F4;
  --m-border:         var(--m-grey-3);
  --m-accent:         var(--m-magenta);

  /* Typography — Inter (gratis da Google Fonts). Sostituto vicino di
     NeueMontreal/Akkordeon-Nine usati da netstrategy.it, che sono commerciali. */
  --m-font-sans:      "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --m-font-display:   "Inter Tight", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --m-font-mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (clamp for fluid) */
  --m-fs-display:     clamp(2.4rem, 6vw, 5rem);
  --m-fs-h1:          clamp(2rem, 4.4vw, 3.5rem);
  --m-fs-h2:          clamp(1.5rem, 2.8vw, 2.25rem);
  --m-fs-h3:          clamp(1.15rem, 1.6vw, 1.4rem);
  --m-fs-body:        1rem;
  --m-fs-small:       .875rem;
  --m-fs-eyebrow:     .75rem;

  --m-lh-tight:       1.05;
  --m-lh-snug:        1.18;
  --m-lh-body:        1.6;

  --m-tracking-eyebrow: .14em;

  /* Layout */
  --m-container:      1240px;
  --m-container-wide: 1440px;
  --m-gutter:         clamp(1rem, 3vw, 2.5rem);
  --m-section-y:      clamp(3.5rem, 7vw, 7rem);

  --m-radius:         12px;
  --m-radius-lg:      20px;
  --m-radius-pill:    999px;

  /* Header — 1 row, minimal: logo + tagline + circle burger */
  --m-header-h:          90px;
  --m-header-top-h:      var(--m-header-h);   /* alias retro-compat */
  --m-z-header:          1000;
  --m-z-overlay:         1100;

  /* Motion */
  --m-ease:           cubic-bezier(.2, .8, .2, 1);
  --m-dur:            .25s;
}

/* Apply font-family to the document so byte's defaults don't bleed in. */
.magenta-layout, .magenta-layout body, body.magenta-layout {
  font-family: var(--m-font-sans);
  background: var(--m-bg);
  color: var(--m-text);
  -webkit-font-smoothing: antialiased;
}

/* Generic typography normalizations on the magenta layout */
.magenta-layout h1, .magenta-layout h2, .magenta-layout h3,
.magenta-layout h4, .magenta-layout h5, .magenta-layout h6 {
  font-family: var(--m-font-display);
  font-weight: 800;
  letter-spacing: -.025em;        /* netstrategy-tight */
  color: var(--m-text);
  line-height: var(--m-lh-snug);
  margin: 0;
  font-feature-settings: "ss01", "cv11";   /* Inter alt characters */
}

.magenta-layout p { line-height: var(--m-lh-body); margin: 0; }

.magenta-layout a { color: inherit; text-decoration: none; }
.magenta-layout a:hover { color: var(--m-magenta); }

/* Image safety */
.magenta-layout img { max-width: 100%; height: auto; display: block; }