/* Marvell Exports — design tokens.
   Source: approved Claude Design canvas https://claude.ai/artifact/T8K5ohGSdJhzfvcVgLmsUq
   (copy in design-reference/canvas/). Templates never hardcode a colour, font, size or
   spacing value — they use these variables. Change the look here, not in templates. */

:root {
  /* Colour */
  --mx-forest: #183A26;        /* headings, dark bands, selected borders */
  --mx-forest-deep: #12291B;   /* footer */
  --mx-leaf: #2E7632;          /* primary buttons, step markers (white text 5.3:1) */
  --mx-leaf-dark: #245E28;     /* links, hover */
  --mx-leaf-tint: #E7F0E3;     /* selected / current tier */
  --mx-sage: #F1F4EE;          /* page bands, image wells */
  --mx-sage-soft: #F7F9F5;     /* inputs, quiet panels */
  --mx-line: #D8DED3;          /* borders */
  --mx-line-strong: #C9D1C4;   /* control borders */
  --mx-line-soft: #E6EAE2;     /* rules inside cards and tables */
  --mx-test-border: #E1E6DC;   /* test-report panel */
  --mx-transfer-border: #9FB59A; /* bank-transfer panel */
  --mx-header-utility-ink: #E4EEE1; /* text on the forest utility bar */
  --mx-header-link: #2B332D;   /* main nav links */
  --mx-header-utility-border: #4E6E59; /* ship-to button border */
  --mx-footer-link: #E4EEE1;
  --mx-footer-fine: #B5C9B1;   /* footer small print (5.9:1 on forest-deep) */
  --mx-footer-rule: #2D4A37;
  --mx-footer-focus: #9FD39A;
  --mx-field-border: #B9C3B3;  /* form inputs */
  --mx-ink: #1C211D;           /* body text */
  --mx-ink-soft: #3E4842;      /* secondary text */
  --mx-muted: #56605A;         /* captions (6.5:1 on white) */
  --mx-white: #FFFFFF;
  --mx-kraft: #C9AE7C;         /* packaging only (pack shots) */
  --mx-kraft-light: #CEB485;
  --mx-kraft-dark: #BA9E6C;
  --mx-kraft-seam: #AE905D;
  --mx-kraft-gusset: #B89C69;
  --mx-jar: #F3F4EF;
  --mx-jar-light: #FAFBF8;
  --mx-jar-shade: #E9EBE5;
  --mx-jar-edge: #CDD2C8;
  --mx-lid: #2B302C;
  --mx-lid-band: #20241F;
  --mx-cap: #1E211F;
  --mx-amber: #7A4718;
  --mx-amber-light: #8A531F;
  --mx-amber-dark: #5C3311;
  --mx-amber-neck: #5E3412;
  --mx-sack: #ECE9DE;
  --mx-sack-weave: #E4E0D3;
  --mx-sack-edge: #D3CEBE;
  --mx-sack-stitch: #B4AD99;
  --mx-pack-shadow: rgba(24, 40, 30, 0.18);
  --mx-label-muted: #4A524C;
  /* Demo label tints (private-label examples) */
  --mx-demo-clay: #7A3B2E;
  --mx-demo-indigo: #2F4F8A;
  --mx-demo-plum: #5A3C7A;
  --mx-demo-charcoal: #2B2B2B;
  --mx-demo-teal: #00665A;
  --mx-warn-bg: #FBF1DC;       /* dangerous-goods badge */
  --mx-warn-ink: #7A4A00;
  --mx-on-dark: #D5E3D2;       /* text on forest */

  /* Type */
  --mx-font-display: "Newsreader", Georgia, serif;          /* headings, Latin names (italic) */
  --mx-font-ui: "Schibsted Grotesk", system-ui, sans-serif; /* UI, prices, forms */
  --mx-text-xs: 13px;
  --mx-text-sm: 14px;
  --mx-text-md: 15px;
  --mx-text-base: 16px;
  --mx-text-lg: 18px;
  --mx-text-xl: 22px;
  --mx-h4: 26px;
  --mx-h3: 30px;
  --mx-h2: 36px;
  --mx-h1: 52px;
  --mx-hero: 60px;
  --mx-leading-tight: 1.05;
  --mx-leading: 1.55;

  /* Space */
  --mx-space-1: 4px;
  --mx-space-2: 8px;
  --mx-space-3: 12px;
  --mx-space-4: 16px;
  --mx-space-5: 20px;
  --mx-space-6: 24px;
  --mx-space-8: 32px;
  --mx-space-10: 40px;
  --mx-space-12: 48px;
  --mx-space-18: 72px;
  --mx-container: 1280px;
  --mx-gutter: 40px;

  /* Shape */
  --mx-radius-sm: 6px;
  --mx-radius: 8px;         /* buttons, inputs */
  --mx-radius-md: 10px;
  --mx-radius-lg: 12px;     /* cards */
  --mx-radius-xl: 16px;     /* image wells, summary panels */
  --mx-radius-pill: 999px;
  --mx-shadow-card: 0 1px 0 var(--mx-line), 0 18px 40px -24px rgba(24, 58, 38, 0.35);

  /* Controls */
  --mx-control-h: 48px;
  --mx-touch: 44px;
  --mx-focus: 3px solid var(--mx-leaf);
}

@media (max-width: 720px) {
  :root {
    --mx-gutter: 16px;
    --mx-h1: 38px;
    --mx-hero: 40px;
    --mx-h2: 28px;
  }
}