/* Marmalade marketing site — tokens from the approved Claude Design export (2026-07-14). */

:root {
  --cream: #fcf4e9;
  --cream-2: #f8ead6;
  --cream-3: #f2ddc2;
  --ink: #4a2a38;
  --ink-soft: rgba(74, 42, 56, .66);
  --ink-faint: rgba(74, 42, 56, .42);

  --orange: #fb7a12;
  --orange-deep: #e85d04;
  --pink: #fc3f82;
  --coral: #fb5e3a;
  --amber: #fb921e;
  --green: #4f9a3a;
  --green-deep: #3c7a2c;

  --grad: linear-gradient(120deg, #fc3f82 0%, #fb5e3a 48%, #fb921e 100%);
  --grad-soft: linear-gradient(120deg, #ffe0ec 0%, #ffe4d6 50%, #ffeccf 100%);

  --disp: "Fredoka", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --hand: "Caveat", cursive;

  --shadow: 0 18px 50px -18px rgba(74, 42, 56, .35);
  --shadow-lg: 0 40px 90px -30px rgba(74, 42, 56, .45);

  /* Hard content-width lock — prevents sections from stretching edge to
     edge on wide/2K/4K monitors. Every top-level section wrapper should
     use this rather than relying on clamp()-based edge padding alone. */
  --container: 1320px;
}