@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src:
    local("Mona Sans"),
    url("../fonts/MonaSansVF.woff2") format("woff2");
}

/* Client-supplied Mona Sans Expanded display family (round-7 client feedback
   fb4 / typography): the display headings render in the wide "Expanded" cut of
   Mona Sans, not a faked Black weight of the width-less base variable font. The
   Light cut draws the open round O/C glyphs; the Black cut is the heavy display
   run. Only the weights the heading motif needs are shipped. */
@font-face {
  font-family: "Mona Sans Expanded";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/MonaSansExpanded-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Mona Sans Expanded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/MonaSansExpanded-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Mona Sans Expanded";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/MonaSansExpanded-Black.woff2") format("woff2");
}

/* Client-supplied brand display webfont, used for the slanted CycleIn "IN"
   lockup and the selected connecting words ("the", "in", "and", "our",
   "with", …) in the heading letterform motif (see headings.css). */
@font-face {
  font-family: "Coffee Service";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("../fonts/coffee-service.woff2") format("woff2"),
    url("../fonts/coffee-service.woff") format("woff");
}

:root {
  --color-brand-black: #063335;
  --color-brand-black-hover: #052e30;
  --color-brand-black-muted: #5a7070;
  --color-brand-black-tint: #ccd3d3;
  --color-brand-white: #f0f0f0;
  --color-brand-white-hover: #d8d8d8;
  /* Round-8 (r19/r24/r26/r36-r39): the theme had conflated lime with yellow —
     both were #e3ff42, so the brand's true green never rendered. Restored to the
     C09 token-values SoT; the #e3ff42 surfaces (hero band, learn cards, pricing)
     now reference --color-brand-yellow, which is what the Figma paints them. */
  --color-brand-lime: #00ff00;
  --color-brand-lime-tint: #b2ffb2;
  --color-brand-pink: #d41166;
  --color-brand-pink-hover: #bf0f5c;
  --color-brand-pink-tint: #f6cfe0;
  --color-brand-yellow: #e3ff42;
  --color-brand-yellow-tint: #f1ffa0;
  --color-green-light: #f0f0f0;
  --color-green-light-hover: #e6eaea;
  --color-green-normal: #5a7070;
  --color-green-normal-hover: #516565;
  --color-green-normal-active: #485a5a;
  --color-green-dark: #445454;
  --color-green-dark-hover: #364343;
  --color-green-dark-active: #283232;
  --color-green-darker: #1f2727;
  --color-error: #ca3535;
  --color-success: #0f7a52;
  --color-warning: #f47738;
  --color-focus: #ffdd00;
  --color-black: #000000;
  --color-white: #ffffff;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --radius-0: 0px;
  --radius-8: 8px;
  --radius-24: 24px;
  --radius-pill: 1000px;
  --font-family-base: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Display headings use the wide Mona Sans Expanded cut (client fb4); the
     CycleIn letterform motif draws the round open-O/C glyphs in the Expanded
     Light weight and the rest in Expanded Black, plus the Coffee Service
     brandmark font for the "IN" lockup and connecting words. */
  --font-family-display: "Mona Sans Expanded", var(--font-family-base);
  --font-family-brandmark: "Coffee Service", "Mona Sans", cursive;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  /* Mona Sans axis stops for the two display looks (this file carries wght +
     opsz; there is no width axis, so the wide "Expanded" run is the Black
     weight, matching the prototype's heavy letters). */
  --font-vf-display-black: "wght" 900;
  --font-vf-display-light: "wght" 300;
  --letter-spacing-base: 0;
  --type-h1: 70px;
  --type-h1-line-height: 1.2;
  --type-h2: 35px;
  --type-h2-line-height: 1.2;
  --type-h3: 25px;
  --type-h3-line-height: 1.3;
  --type-body-large: 20px;
  /* Round-10 checklist r22: body-large had a size token but no line-height one,
     so anything using it fell back to the inherited body line-height. The design
     sets every body-large lede at 20px/30px (checked across the Checkout and all
     four Basket frames, which agree), and 30/20 is the same 1.5 ratio the body
     token already uses. */
  --type-body-large-line-height: 1.5;
  --type-body: 18px;
  --type-body-line-height: 1.5;
  --type-label: 18px;
  --type-label-line-height: 1.3;
  --type-button: 20px;
  --type-button-line-height: 1.2;
  --type-link: 18px;
  --type-mobile-1: 42px;
  --type-mobile-2: 30px;
  --type-mobile-3: 24px;
  --type-mobile-3-line-height: 1.25;
  --type-mobile-body-large: 19px;
  --type-mobile-body: 17px;
  --type-mobile-label: 16px;
  --type-mobile-label-line-height: 1.4;
  --type-mobile-button: 18px;
  --type-mobile-link: 17px;
  --type-h1-size: var(--type-h1);
  --type-h2-size: var(--type-h2);
  --type-h3-size: var(--type-h3);
  --type-body-large-size: var(--type-body-large);
  --type-body-size: var(--type-body);
  --type-label-size: var(--type-label);
  --type-button-size: var(--type-button);
  --type-link-size: var(--type-link);
  --type-mobile-h1-size: var(--type-mobile-1);
  --type-mobile-h2-size: var(--type-mobile-2);
  --type-mobile-h3-size: var(--type-mobile-3);
  --type-mobile-body-large-size: var(--type-mobile-body-large);
  --type-mobile-body-size: var(--type-mobile-body);
  --type-mobile-label-size: var(--type-mobile-label);
  --type-mobile-button-size: var(--type-mobile-button);
  --type-mobile-link-size: var(--type-mobile-link);
  --layout-columns: 12;
  --layout-side-margin: 120px;
  --layout-gutter: 24px;
  --layout-max-width: 1200px;
  --layout-edge-padding: 32px;
  --breakpoint-mobile: 1200px;
  --breakpoint-1200: 1200px;
  --breakpoint-1440: 1440px;
  --breakpoint-1920: 1920px;
  --a11y-min-target: 44px;
  --a11y-focus-ring-inner: 2px;
  --a11y-focus-ring-outer: 3px;
  --a11y-focus-offset: 2px;
  --a11y-focus-radius-accordion: var(--radius-0);
  --a11y-focus-radius-card: var(--radius-8);
  --a11y-focus-radius-button: var(--radius-pill);
}

@media (max-width: 1199px) {
  :root {
    --type-h1-size: var(--type-mobile-h1-size);
    --type-h2-size: var(--type-mobile-h2-size);
    --type-h3-size: var(--type-mobile-h3-size);
    --type-h3-line-height: var(--type-mobile-3-line-height);
    --type-body-large-size: var(--type-mobile-body-large-size);
    --type-body-size: var(--type-mobile-body-size);
    --type-label-size: var(--type-mobile-label-size);
    --type-label-line-height: var(--type-mobile-label-line-height);
    --type-button-size: var(--type-mobile-button-size);
    --type-link-size: var(--type-mobile-link-size);
  }
}

/* The supplied 375px frames use a 16px content gutter. Keep the 32px
   hand-off gutter for tablets and small desktops, then switch at phone size so
   media, cards and copy occupy the design's 343px column. */
@media (max-width: 767px) {
  :root {
    --layout-edge-padding: 16px;
  }
}