/* atenzione — design tokens v1
   Paste into the theme (or enqueue as its own stylesheet).
   Contrast ratios in comments are WCAG 2.1 against the noted ground. */

:root {
  /* ----- grounds ----- */
  --at-nit:          #0e0a2e;  /* default page ground */
  --at-blau:         #241975;  /* raised surfaces, secondary grounds */
  --at-paper:        #f0eeea;  /* light ground + primary ink on dark */
  --at-crema:        #eae2c7;  /* food film ONLY. never in the same view as --at-paper */

  /* ----- signature ----- */
  --at-vermell:      #d31145;  /* surfaces, rules, the lens core. NOT text on nit (3.6:1) */
  --at-vermell-clar: #ff5c7a;  /* red TEXT and links on dark grounds. 6.5:1 on nit */

  /* ----- secondary ink + lines ----- */
  --at-bruma:        #9a95b8;  /* secondary text on dark. 6.7:1 on nit */
  --at-linia:        #2b2454;  /* borders, separators, grid lines */
  --at-elevat:       #140f36;  /* cards / raised blocks on nit */

  /* ----- states (deliberately not red: red means brand) ----- */
  --at-verd:         #3ddc97;  /* success. 10.8:1 on nit */
  --at-ambre:        #f2b43c;  /* error + warning. 10.3:1 on nit */

  /* ----- type ----- */
  --at-font: Archivo, system-ui, -apple-system, sans-serif;

  --at-size-display: clamp(2.375rem, 6vw, 4.25rem);
  --at-size-h2:      clamp(1.5rem, 3.4vw, 2.125rem);
  --at-size-body:    1.0625rem;   /* 17px */
  --at-size-small:   0.875rem;    /* 14px */
  --at-size-eyebrow: 0.8125rem;   /* 13px */

  --at-lh-display: 1;
  --at-lh-title:   1.1;
  --at-lh-body:    1.6;

  --at-measure: 70ch;             /* max line length for body copy */

  /* ----- spacing (8px base) ----- */
  --at-s1: 0.5rem;  --at-s2: 1rem;   --at-s3: 1.5rem;
  --at-s4: 2rem;    --at-s6: 3rem;   --at-s8: 5rem;

  /* ----- brand geometry ----- */
  --at-logo-min: 150px;           /* horizontal logotype minimum width */
  --at-logo-air: 11.8%;           /* clear space, as % of logo width */
  --at-tap-min: 48px;
}

/* Display and titles run slightly expanded; body stays normal width.
   This is what replaces having a second typeface. */
.at-display {
  font-family: var(--at-font);
  font-weight: 700; font-stretch: 112%;
  font-size: var(--at-size-display);
  line-height: var(--at-lh-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.at-h2 {
  font-family: var(--at-font);
  font-weight: 600; font-stretch: 108%;
  font-size: var(--at-size-h2);
  line-height: var(--at-lh-title);
  letter-spacing: -0.015em;
}
.at-body {
  font-family: var(--at-font);
  font-weight: 400;
  font-size: var(--at-size-body);
  line-height: var(--at-lh-body);
  max-width: var(--at-measure);
  text-wrap: pretty;
}
.at-eyebrow {
  font-family: var(--at-font);
  font-weight: 600;
  font-size: var(--at-size-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--at-bruma);
}

/* Primary action. Paper on vermell is 4.6:1 — the one place brand red
   is allowed to carry text. One per view. */
.at-btn {
  display: inline-flex; align-items: center;
  min-height: var(--at-tap-min);
  padding: 0.875rem 1.625rem;
  background: var(--at-vermell); color: var(--at-paper);
  font: 600 1rem/1 var(--at-font);
  border: 0; cursor: pointer;
}
.at-btn:hover { background: #ba0e3c; }

.at-btn--ghost {
  background: transparent; color: var(--at-paper);
  border: 1px solid var(--at-paper);
}
.at-btn--ghost:hover { background: var(--at-paper); color: var(--at-nit); }

a { color: var(--at-vermell-clar); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--at-paper); }

/* Clear space around the logotype. The padding is a % so the margin
   tracks the logo width instead of drifting with the viewport. */
.at-logo { display: block; width: 100%; max-width: 100%; height: auto; }
.at-logo-frame { padding: 9.547%; box-sizing: border-box; }  /* = 11.8% of the logo itself */

/* food film sub-brand: swap the light ground, keep everything else.
   On crema, body text is nit; red drops to 4.1:1 so it is headline-only. */
.at-foodfilm { background: var(--at-crema); color: var(--at-nit); }