/* Focal Molography Academy — brand tokens.
   Bound to the Miltenyi "Biotec Components" Figma library (file AjfBjwtnnPZyNI6HkimE80),
   per the CI cascade in 110 Corporate Identity/_BRAND.md and Volker's 2026-09-16 decision.
   Loaded before base.css and before the training page's own styles. */

/* Myriad Pro, self-served by lino-biotech.com with open CORS (access-control-allow-origin:*,
   checked 2026-09-18). Fallback chain per lino rulebook §2.4. No <link rel=preload>:
   HubSpot strips crossorigin, which makes the browser fetch each file twice. */
@font-face{font-family:"Myriad Pro";font-weight:300;font-style:normal;font-display:swap;
  src:url("https://www.lino-biotech.com/hubfs/fonts/myriad-pro-light.woff2") format("woff2");}
@font-face{font-family:"Myriad Pro";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://www.lino-biotech.com/hubfs/fonts/myriad-pro-regular.woff2") format("woff2");}
@font-face{font-family:"Myriad Pro";font-weight:400;font-style:italic;font-display:swap;
  src:url("https://www.lino-biotech.com/hubfs/fonts/myriad-pro-italic.woff2") format("woff2");}
@font-face{font-family:"Myriad Pro";font-weight:700;font-style:normal;font-display:swap;
  src:url("https://www.lino-biotech.com/hubfs/fonts/myriad-pro-bold.woff2") format("woff2");}

:root{
  /* --- library palette, variable names mirror Biotec Components --- */
  --primary-violet:#3c1192; --primary-orange:#ff7d00;
  --corporate-turquoise:#4bbecf; --corporate-blue:#4a96d2; --corporate-green:#c8d400;
  --corporate-light-orange:#f7a600; --corporate-yellow:#ffdd00; --corporate-magenta:#db5197;
  /* grey scale */
  --grey-charcoal:#333333; --grey-slate:#808080; --grey-stone:#b2b2b2; --grey-ash:#d9d9d9;
  --grey-white-smoke:#f5f5f5; --grey-white:#ffffff;
  /* notification (library set, chosen 2026-09-18) */
  --notification-info:#51a2de; --notification-success:#5fb85f; --notification-error:#cc4945;
  /* lino OVERRIDE tokens */
  --macs-matchmaker-blue:#2caefe; --orange-dark:#e69500; --violet-deep:#2a0b68;
  /* violet primary hover/pressed LIGHTEN the fill (Miltenyi design system, Buttons); only
     orange CTAs darken, via --orange-dark (lino rulebook 2.3). Values are lino's own tints. */
  --violet-hover:#5a2fb0; --violet-pressed:#6b40bb;
  /* slate darkened for captions and small text: grey-slate #808080 is 3.95:1 on white, this is
     7.0:1. lino accessibility override, used by the academy (base.css); the training keeps slate. */
  --grey-slate-text:#595959;

  /* --- spacing (library, quarter-rem scale) and the one radius --- */
  --w2:2px; --w4:16px; --w6:24px; --w8:32px; --w12:48px; --w16:64px;
  --radius-0:0;

  /* --- typeface --- */
  --font:"Myriad Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* --- web type scale (desktop), size/line from the design-system prototype --- */
  --h1:56px; --h1-lh:1.2; --h2:36px; --h2-lh:1.2; --h3:24px; --h3-lh:1.2;
  --h4:19.2px; --h4-lh:1.2; --h5:16px; --h5-lh:1.5; --h6:14px; --h6-lh:1.1;
  --sub:19px; --sub-lh:1.35; --legend:12px; --legend-lh:1.1;

  /* --- layout grid --- */
  --container:1170px; --gutter:32px; --gutter-mobile:16px;
}

@media(max-width:768px){
  :root{ --h1:35px; --h2:28px; --h3:20px; --sub:16px; }
}