/* Design tokens — colors, spacing, type scale */
:root {
  /* Brand palette — exact values from the official AUMA brand guide (p.15).
     Nothing outside this palette may be used, apart from --color-ink as a
     dark neutral for body copy. */
  --color-neutral: #F2EFDD;
  --color-light-lychee: #E4D0CA;
  --color-dark-lychee: #A83562;
  --color-green-apple: #D9DA8F;
  --color-red-apple: #EA2629;
  --color-ink: #1F1B18;

  /* Legacy aliases — kept so any remaining references keep working while we
     migrate. Prefer the brand names above for new code. */
  --color-plum: var(--color-dark-lychee);
  --color-olive: var(--color-green-apple);
  --color-cream: var(--color-neutral);
  --color-brick: var(--color-red-apple);
  --color-forest: var(--color-dark-lychee);
  --color-cream-dark: var(--color-light-lychee);

  /* Typography — Acme Gothic is the brand font for all copy.
     Cormorant / Inter remain as fallbacks until licensed files land in
     assets/fonts/acme-gothic/ (see typography.css @font-face queue). */
  --font-display: 'Acme Gothic', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Acme Gothic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: var(--font-display);
  --font-body: 'Acme Gothic', 'VC Henrietta', 'Source Serif 4', Georgia, serif;

  /* Type scale */
  --fs-display: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Spacing scale (4-pt base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }