/* ICMAB-CSIC — generated from tokens.json */
:root, [data-theme="light"] {
  --icmab-purple: #383660;
  --icmab-purple-hover: #2e2d50;
  --icmab-purple-deep: #302f53;
  --icmab-purple-active: #6d6aab;
  --icmab-purple-soft: #6e6697;
  --icmab-purple-muted: #8693b6;
  --dropdown-top: #4a4785;
  --dropdown-bottom: #23213f;
  --logo-black: #000000;
  --severo-ochoa-gold: #e0cf9c;
  --guide-rule: #ffd773;
  --secondary: #4da8c7;
  --secondary-hover: #60b1cd;
  --secondary-tint: #aed7e6;
  --focus-tint: #e8f4f8;
  --selection: #acd5ea;
  --surface: #f5f7f9;
  --surface-white: #ffffff;
  --surface-muted: #e9ecef;
  --line: #d5dde4;
  --ink-strong: #31373d;
  --ink: #55616d;
  --ink-muted: #8e9fa4;
  --ink-deep: #1c2227;
  --on-dark: #ffffff;
  --success: #3bcb6e;
  --warning: #f59a21;
  --danger: #e51b4b;
  --highlight: #fff631;
  --mat4electronics: #6069ad;
  --mat4energy: #15b2aa;
  --mat4health: #d45a73;
  --link: var(--icmab-purple);
  --shadow-small: 0 2px 8px rgba(0,0,0,.07);
  --shadow-medium: 0 4px 15px rgba(0,0,0,.07);
  --shadow-large: 0 14px 25px rgba(0,0,0,.1);
  --shadow-xlarge: 0 28px 50px rgba(0,0,0,.12);
  --shadow-dropdown: 0 20px 40px rgba(0,0,0,.25);
}
:root {
  --space-xs: 5px;
  --space-s: 10px;
  --space-m: 20px;
  --space-l: 40px;
  --space-gutter-s: 15px;
  --space-gutter-m: 30px;
  --space-gutter-l: 40px;
  --section-large: 140px;
  --container: 1200px;
  --control-height: 37px;
  --navbar-height: 60px;
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-pill: 500px;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-guide: Montserrat, "Space Grotesk", system-ui, sans-serif;
  --font-office: Calibri, Carlito, "Source Sans 3", sans-serif;
}
.heading-large { font-family: var(--font-display); font-size: 90px; line-height: 1.2; font-weight: 400; }
.heading-medium { font-family: var(--font-display); font-size: 67px; line-height: 1.2; font-weight: 400; }
.heading-small { font-family: var(--font-display); font-size: 52px; line-height: 1.2; font-weight: 600; }
.h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.2; font-weight: 700; }
.h2 { font-family: var(--font-display); font-size: 30px; line-height: 1.3; font-weight: 700; }
.h3 { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 600; }
.h4 { font-family: var(--font-display); font-size: 28px; line-height: 1.4; font-weight: 600; }
.h5 { font-family: var(--font-display); font-size: 20px; line-height: 1.4; font-weight: 600; }
.h6 { font-family: var(--font-display); font-size: 18px; line-height: 1.4; font-weight: 400; letter-spacing: 1px; }
.lead { font-family: var(--font-sans); font-size: 22px; line-height: 1.45; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 18px; line-height: 27px; font-weight: 400; }
.nav { font-family: var(--font-sans); font-size: 18px; line-height: 27px; font-weight: 600; }
.meta { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 400; }
.button { font-family: var(--font-sans); font-size: 16px; line-height: 35px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.table-head { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 1px; }
.badge { font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 600; }
.guide-title { font-family: var(--font-guide); font-size: 64px; line-height: 1.1; font-weight: 700; }
.guide-body { font-family: var(--font-office); font-size: 16px; line-height: 1.5; font-weight: 400; }