/* ===========================================================================
   Design tokens for the marketing site.
   ---------------------------------------------------------------------------
   Every colour, typeface and duration used by the marketing pages is named
   here. Page stylesheets should reference these rather than repeating literal
   values; a literal in a page stylesheet is a signal that either the value is
   genuinely one-off, or that a token is missing.

   Breakpoints cannot be expressed as custom properties, so they are only
   documented here.

   The Figma file ships three responsive frames — Desktop 1440, Small 1024 and
   Mobile 380 — but only TWO layouts. Every component in it is a two-variant
   set (`Mobile=No` / `Mobile=Yes`), and the Small 1024 frame instantiates
   `Mobile=No` for all nine of its sections, exactly as Desktop does. Small is
   the desktop layout reflowed to 1024px, not a third tier. So:

       (max-width: 1023px)                         the main "mobile" switch
       (min-width: 1024px)                         desktop

   1024px is therefore the FIRST desktop pixel, not the last mobile one: write
   `max-width: 1023px`, never `max-width: 1024px`, which would put the design's
   own Small frame width into the mobile layout.

   Two sub-bands exist inside mobile. They have no Figma frame of their own,
   and refine the phone layout below what the design specifies:

       (max-width: 640px)                          small phone
       (min-width: 640px) and (max-width: 1023px)  large phone / small tablet

   And one inside desktop, for widths below the max container:

       (min-width: 1024px) and (max-width: 1439px)
   =========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --mz-ink: #0b0b0a;             /* page background, and text on light panels */
  --mz-white: #fff;
  --mz-paper: #f6f6f4;           /* light panel background (CTA band)         */
  --mz-paper-border: #dbdad2;    /* outline buttons on a light panel          */
  --mz-surface: #1a1a1a;         /* opaque mobile-menu card fill (only use)   */

  /* Frosted panel fill, used by the decorative product panels on several
     pages. Same value as --mz-rule-soft, but a fill rather than a rule, so it
     is named separately — do not use the rule token as a background. */
  --mz-panel: rgba(255, 255, 255, 0.1);

  --mz-lime: #deff85;            /* nav underline, section tag pill           */
  --mz-lilac: #e8bbff;           /* primary button                            */
  --mz-lilac-hover: #d9a8f0;
  --mz-lilac-active: #cf9ae6;

  /* --- Text on the dark background -------------------------------------- */
  --mz-text: var(--mz-white);
  --mz-text-secondary: rgba(255, 255, 255, 0.7);   /* accordion body          */
  --mz-text-tertiary: rgba(255, 255, 255, 0.6);    /* footer links            */
  --mz-text-quiet: rgba(255, 255, 255, 0.5);       /* copyright, social icons */
  --mz-text-faint: rgba(255, 255, 255, 0.4);       /* legal disclosure        */

  /* --- Text on a light panel -------------------------------------------- */
  --mz-text-on-light: var(--mz-ink);
  --mz-text-on-light-secondary: rgba(0, 0, 0, 0.6);

  /* --- Rules and hover washes on the dark background -------------------- */
  --mz-rule: rgba(255, 255, 255, 0.2);        /* outline buttons, accordion   */
  --mz-rule-soft: rgba(255, 255, 255, 0.1);   /* footer dividers              */
  --mz-rule-faint: rgba(255, 255, 255, 0.08); /* mobile menu link separators  */

  --mz-wash: rgba(255, 255, 255, 0.08);       /* :hover on a dark button      */
  --mz-wash-strong: rgba(255, 255, 255, 0.12);/* :active on a dark button     */
  --mz-wash-on-light: rgba(0, 0, 0, 0.08);
  --mz-wash-on-light-strong: rgba(0, 0, 0, 0.12);

  /* --- Scrims layered over hero photography ----------------------------- */
  --mz-scrim: rgba(0, 0, 0, 0.2);
  --mz-scrim-menu: rgba(0, 0, 0, 0.85);       /* behind the open mobile menu  */
  --mz-scrim-panel: rgba(0, 0, 0, 0.7);       /* frosted snippet panels; Figma
                                                 `background/primary-inverse-blur` */

  /* --- Type ------------------------------------------------------------- */
  --mz-font-sans: 'Instrument Sans', sans-serif;

  /* Headline face. The design system's brand typeface is Financier Display
     (`fonts/ft-brand` in Figma) and we have no licence for it, so nothing in
     this stack past the first entry is loaded and headlines resolve to Georgia.

     Lora is listed but not self-hosted either, and deliberately so: measured
     against the design it is 4% WIDER than Georgia, while Financier Display is
     narrower than both — it sets the home headline in two lines where Georgia
     and Lora each need three. Loading Lora would move away from the design,
     not towards it.

     Dropping real Financier Display woff2 files into css/fonts.css is the only
     change needed to switch — this stack already prefers it. */
  --mz-font-serif: 'Financier Display', 'Lora', Georgia, serif;

  /* --- Layout ----------------------------------------------------------- */
  --mz-page-max: 1440px;
  --mz-gutter: 40px;             /* horizontal page padding, desktop          */
  --mz-gutter-mobile: 20px;      /* ...and at <= 1023px                       */

  /* --- Motion ----------------------------------------------------------- */
  --mz-transition: 0.15s ease;        /* button and link colour changes       */
  --mz-transition-slow: 0.3s ease;    /* nav underline, accordion open/close  */
}