/* =========================================================================
   CanvasPro brochures · brand tokens
   Source: DMT Brand Guidelines v2.6. Change a value here and every
   brochure updates. Do not add colours that are not in the brand guide.
   ========================================================================= */

/* Fonts: ONLY the two families in the DMT brand system.
   - All Round Gothic: Bold only, uppercase, short headings and two-tone
     statements. Loaded from DMT's Adobe Fonts kit (never share font files).
   - Roboto: long titles (Regular, uppercase), paragraphs (300-400),
     labels (500, uppercase, 0.28em tracking). Google Fonts, open licence.
   If All Round Gothic cannot load, headings fall back to Roboto (the
   brand guide's approved fallback). */
@import url("https://use.typekit.net/koy6bik.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap");

:root {
  /* --- Palette (brand guide) --- */
  --blue: #66CCFF;          /* DMT Blue: emphasis, signals, large type, text on dark */
  --charcoal: #323336;      /* DMT Charcoal: headings and structure on light */
  --black: #0C0D0E;         /* Screen Black: dark sections */
  --cool: #E5E5EA;          /* Cool White: light working sections */
  --white: #FFFFFF;         /* Pure White */
  /* DMT Orange (#FF9A66) is Amplify-only: not used in CanvasPro material. */

  /* --- Tints derived from the palette --- */
  --black-2: #15161A;       /* raised surface on dark */
  --black-line: #2A2C31;    /* hairlines on dark */
  --on-dark-2: #A9ACB4;     /* secondary text on dark */
  --cool-2: #F2F2F5;        /* raised surface on light */
  --cool-line: #C6C7CE;     /* hairlines on light */
  --on-light-2: #55575D;    /* secondary text on light */
  --blue-glow: rgba(102, 204, 255, 0.16); /* atmospheric light: 10-24% */

  /* --- Type families --- */
  --font-display: "all-round-gothic", "Roboto", sans-serif;
  --font-body: "Roboto", sans-serif;

  /* --- Type scale (rem). On screen 1rem = 16.5px; in the PDF 1rem = 12.4px,
         so the whole system scales down to A4 without separate values. --- */
  --fs-mega: clamp(2.6rem, 7.4vw, 5.4rem);  /* cover statement */
  --fs-xl:   clamp(2.1rem, 5.2vw, 3.7rem);  /* section statement */
  --fs-l:    clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-m:    1.3rem;                        /* card titles */
  --fs-lead: clamp(1.1rem, 1.6vw, 1.32rem); /* intro paragraph */
  --fs-body: 1rem;
  --fs-s:    1rem;                          /* supporting copy: brand minimum 16px on screen */
  --fs-label:.62rem;                        /* labels: 10px on screen (brand) */

  /* --- Spacing and shape --- */
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);  /* section side padding on screen */
  --pad-y: clamp(3.5rem, 9vw, 7.5rem);   /* section vertical padding on screen */
  --max: 74rem;                          /* content width on screen */
  --gap: clamp(1rem, 2.4vw, 1.9rem);
  --gap-s: clamp(.6rem, 1.2vw, .95rem);
  --radius: 18px;                        /* brand corner radius */
  --hair: 1px;

  /* --- A4 (PDF only) --- */
  --a4-w: 210mm;
  --a4-h: 297mm;
  --a4-mx: 15mm;
  --a4-my: 14mm;
}