/*
 * Aalto University Design System — CSS Tokens
 * Source: brand.aalto.fi/en/ds/tokens
 * Extracted: 2026-05-19
 *
 * Usage:
 *   Link this file in your HTML: <link rel="stylesheet" href="aalto-tokens.css">
 *   Use semantic shorthand vars in your own CSS: var(--aalto-col-bg), var(--aalto-col-fg), etc.
 *   Apply themes with classes, e.g.: class="aalto-semantic-color__theme--brand aalto-semantic-color__theme-variant--yellow"
 *
 * Token tiers:
 *   --aalto-base-*      Raw values (colours, dimensions, font sizes). Don't use directly.
 *   --aalto-alias-*     Mapped values per theme schema. Don't use directly.
 *   --aalto-col-*       Semantic shorthand for the active theme's colours. USE THESE.
 *
 * Semantic colour shorthands (from active theme):
 *   --aalto-col-bg            Page/screen background
 *   --aalto-col-bg-tint       Secondary background for section separation
 *   --aalto-col-fg            Titles and high-contrast text
 *   --aalto-col-fg-tint       Body text and less prominent elements
 *   --aalto-col-surface       Background for cards and lifted elements
 *   --aalto-col-subtle        Low-contrast elements (dividers etc.)
 *   --aalto-col-overlay       Overlay layer colour
 *   --aalto-col-action        Interactive elements (buttons, links)
 *   --aalto-col-hover         Hovered state
 *   --aalto-col-active        Active state
 *   --aalto-col-disabled      Disabled state
 *   --aalto-col-selected      Selected state
 *   --aalto-col-action-rev    Contrasting content on top of action colour
 *   --aalto-col-hover-rev     Hovered state reversed
 *   --aalto-col-active-rev    Active state reversed
 *   --aalto-col-disabled-rev  Disabled state reversed
 *   --aalto-col-selected-rev  Selected state reversed
 */

/* ============================================================
   BASE TOKENS — :root
   ============================================================ */

:root {

  /* --- Brand colours --- */
  --aalto-base-color__aalto-brand--aalto-red-1: #fd6360;
  --aalto-base-color__aalto-brand--aalto-red-2: #501f1e;
  --aalto-base-color__aalto-brand--aalto-yellow-1: #f7e159;
  --aalto-base-color__aalto-brand--aalto-yellow-2: #6c6227;
  --aalto-base-color__aalto-brand--aalto-blue-1: #46a5ff;
  --aalto-base-color__aalto-brand--aalto-blue-2: #183856;
  --aalto-base-color__aalto-brand--aalto-black-1: #000000;
  --aalto-base-color__aalto-brand--aalto-black-2: #e0e0e0;

  /* --- School colours (primary / dark) --- */
  --aalto-base-color__school--eng-1: #dc6ade;
  --aalto-base-color__school--eng-2: #472247;
  --aalto-base-color__school--elec-1: #a987ff;
  --aalto-base-color__school--elec-2: #392d56;
  --aalto-base-color__school--chem-1: #5dd089;
  --aalto-base-color__school--chem-2: #255236;
  --aalto-base-color__school--arts-1: #ffc341;
  --aalto-base-color__school--arts-2: #6c531b;
  --aalto-base-color__school--biz-1: #9bd84c;
  --aalto-base-color__school--biz-2: #3f581f;
  --aalto-base-color__school--sci-1: #ff8d4f;
  --aalto-base-color__school--sci-2: #5f341d;

  /* --- Neutral (greyscale) --- */
  --aalto-base-color__neutral--1: #ffffff;
  --aalto-base-color__neutral--2: #fafafa;
  --aalto-base-color__neutral--3: #f2f2f2;
  --aalto-base-color__neutral--4: #e0e0e0;
  --aalto-base-color__neutral--5: #505050;
  --aalto-base-color__neutral--6: #212121;
  --aalto-base-color__neutral--7: #1c1c1c;
  --aalto-base-color__neutral--8: #151515;
  --aalto-base-color__neutral--9: #000000;
  --aalto-base-color__neutral--white: #ffffff;
  --aalto-base-color__neutral--black: #151515;

  /* --- Transparent overlays --- */
  --aalto-base-color__transparent--darkening-1: rgb(0 0 0 / 0.1);
  --aalto-base-color__transparent--darkening-2: rgb(0 0 0 / 0.15);
  --aalto-base-color__transparent--darkening-3: rgb(0 0 0 / 0.2);
  --aalto-base-color__transparent--darkening-4: rgb(0 0 0 / 0.4);
  --aalto-base-color__transparent--lightening-1: rgb(255 255 255 / 0.1);
  --aalto-base-color__transparent--lightening-2: rgb(255 255 255 / 0.15);
  --aalto-base-color__transparent--lightening-3: rgb(255 255 255 / 0.2);
  --aalto-base-color__transparent--lightening-4: rgb(255 255 255 / 0.4);

  /* --- Tints (solid alternatives to transparent) --- */
  --aalto-base-color__tint--white-tint-1: #e5e5e5;
  --aalto-base-color__tint--white-tint-2: #d9d9d9;
  --aalto-base-color__tint--white-tint-3: #cccccc;
  --aalto-base-color__tint--white-tint-4: #999999;
  --aalto-base-color__tint--black-tint-1: #2c2c2c;
  --aalto-base-color__tint--black-tint-2: #383838;
  --aalto-base-color__tint--black-tint-3: #444444;
  --aalto-base-color__tint--black-tint-4: #737373;
  --aalto-base-color__tint--red-tint-1: #e45956;
  --aalto-base-color__tint--red-tint-2: #d75452;
  --aalto-base-color__tint--red-tint-3: #ca4f4d;
  --aalto-base-color__tint--red-tint-4: #983b3a;
  --aalto-base-color__tint--yellow-tint-1: #deca50;
  --aalto-base-color__tint--yellow-tint-2: #d2bf4c;
  --aalto-base-color__tint--yellow-tint-3: #c6b447;
  --aalto-base-color__tint--yellow-tint-4: #948735;
  --aalto-base-color__tint--blue-tint-1: #3f94e5;
  --aalto-base-color__tint--blue-tint-2: #3c8cd9;
  --aalto-base-color__tint--blue-tint-3: #3884cc;
  --aalto-base-color__tint--blue-tint-4: #2a6399;
  --aalto-base-color__tint--black-brand-tint-1: #1a1a1a;
  --aalto-base-color__tint--black-brand-tint-2: #262626;
  --aalto-base-color__tint--black-brand-tint-3: #333333;
  --aalto-base-color__tint--black-brand-tint-4: #666666;
  --aalto-base-color__tint--eng-tint-1: #c65fc8;
  --aalto-base-color__tint--eng-tint-2: #bb5abd;
  --aalto-base-color__tint--eng-tint-3: #b055b2;
  --aalto-base-color__tint--eng-tint-4: #844085;
  --aalto-base-color__tint--elec-tint-1: #987ae5;
  --aalto-base-color__tint--elec-tint-2: #9073d9;
  --aalto-base-color__tint--elec-tint-3: #876ccc;
  --aalto-base-color__tint--elec-tint-4: #655199;
  --aalto-base-color__tint--chem-tint-1: #54bb7b;
  --aalto-base-color__tint--chem-tint-2: #4fb174;
  --aalto-base-color__tint--chem-tint-3: #4aa66e;
  --aalto-base-color__tint--chem-tint-4: #387d52;
  --aalto-base-color__tint--arts-tint-1: #e5af3b;
  --aalto-base-color__tint--arts-tint-2: #d9a637;
  --aalto-base-color__tint--arts-tint-3: #cc9c34;
  --aalto-base-color__tint--arts-tint-4: #997527;
  --aalto-base-color__tint--biz-tint-1: #8bc244;
  --aalto-base-color__tint--biz-tint-2: #84b841;
  --aalto-base-color__tint--biz-tint-3: #7cad3d;
  --aalto-base-color__tint--biz-tint-4: #5d822e;
  --aalto-base-color__tint--sci-tint-1: #e57f47;
  --aalto-base-color__tint--sci-tint-2: #d97843;
  --aalto-base-color__tint--sci-tint-3: #cc713f;
  --aalto-base-color__tint--sci-tint-4: #99552f;

  /* --- Dimensions (spacing / sizing scale) --- */
  --aalto-base-dimension--1: 0.25rem;  /* 4px  */
  --aalto-base-dimension--2: 0.5rem;   /* 8px  */
  --aalto-base-dimension--3: 1rem;     /* 16px */
  --aalto-base-dimension--4: 1.5rem;   /* 24px */
  --aalto-base-dimension--5: 2rem;     /* 32px */
  --aalto-base-dimension--6: 2.5rem;   /* 40px */
  --aalto-base-dimension--7: 3rem;     /* 48px */
  --aalto-base-dimension--8: 3.5rem;   /* 56px */
  --aalto-base-dimension--9: 4rem;     /* 64px */
  --aalto-base-dimension--10: 5rem;    /* 80px */
  --aalto-base-dimension--11: 6rem;    /* 96px */
  --aalto-base-dimension--12: 7rem;    /* 112px */
  --aalto-base-dimension--13: 8rem;    /* 128px */

  /* --- Breakpoints --- */
  --aalto-base-breakpoint--phone-portrait: 320px;
  --aalto-base-breakpoint--phone-landscape: 576px;
  --aalto-base-breakpoint--tablet: 768px;
  --aalto-base-breakpoint--desktop: 992px;
  --aalto-base-breakpoint--xl: 1616px;

  /* --- Font families --- */
  --aalto-base-font-family--inter: 'Inter', sans-serif;
  --aalto-base-font-family--besley: 'Besley', serif;
  --aalto-base-font-family--source-code-pro: 'Source Code Pro', monospace;

  /* --- Font sizes --- */
  --aalto-base-font-size--1: 0.875rem;  /* 14px */
  --aalto-base-font-size--2: 1rem;      /* 16px */
  --aalto-base-font-size--3: 1.125rem;  /* 18px */
  --aalto-base-font-size--4: 1.25rem;   /* 20px */
  --aalto-base-font-size--5: 1.5rem;    /* 24px */
  --aalto-base-font-size--6: 2rem;      /* 32px */
  --aalto-base-font-size--7: 4rem;      /* 64px */

  /* --- Line heights --- */
  --aalto-base-line-height--1: 1rem;    /* 16px */
  --aalto-base-line-height--2: 1.5rem;  /* 24px */
  --aalto-base-line-height--3: 1.75rem; /* 28px */
  --aalto-base-line-height--4: 2rem;    /* 32px */
  --aalto-base-line-height--5: 2.5rem;  /* 40px */
  --aalto-base-line-height--6: 3rem;    /* 48px */
  --aalto-base-line-height--7: 4.5rem;  /* 72px */

  /* --- Letter spacing --- */
  --aalto-base-letter-spacing--1: 0rem;
  --aalto-base-letter-spacing--2: -0.0625rem; /* -1px */
  --aalto-base-letter-spacing--3: -0.125rem;  /* -2px */

  /* --- Paragraph spacing --- */
  --aalto-base-paragraph-spacing--1: 0rem;
  --aalto-base-paragraph-spacing--2: 0.875rem; /* 14px */
  --aalto-base-paragraph-spacing--3: 1rem;     /* 16px */
  --aalto-base-paragraph-spacing--4: 1.125rem; /* 18px */
  --aalto-base-paragraph-spacing--5: 1.25rem;  /* 20px */
  --aalto-base-paragraph-spacing--6: 1.5rem;   /* 24px */
}


/* ============================================================
   ALIAS TOKENS — Schema: on light background
   ============================================================ */

:root {
  /* Basic colours on light */
  --aalto-alias-color__schema-on-light-basic--background:       var(--aalto-base-color__neutral--1);
  --aalto-alias-color__schema-on-light-basic--background-tint:  var(--aalto-base-color__neutral--3);
  --aalto-alias-color__schema-on-light-basic--foreground:       var(--aalto-base-color__neutral--9);
  --aalto-alias-color__schema-on-light-basic--foreground-tint:  var(--aalto-base-color__neutral--5);
  --aalto-alias-color__schema-on-light-basic--surface:          var(--aalto-base-color__neutral--1);
  --aalto-alias-color__schema-on-light-basic--subtle:           var(--aalto-base-color__neutral--4);
  --aalto-alias-color__schema-on-light-basic--overlay:          var(--aalto-base-color__transparent--darkening-4);

  /* Action colours on light */
  --aalto-alias-color__schema-on-light-action--action:    var(--aalto-base-color__neutral--9);
  --aalto-alias-color__schema-on-light-action--hover:     var(--aalto-base-color__tint--black-tint-1);
  --aalto-alias-color__schema-on-light-action--active:    var(--aalto-base-color__tint--black-tint-2);
  --aalto-alias-color__schema-on-light-action--disabled:  var(--aalto-base-color__neutral--4);
  --aalto-alias-color__schema-on-light-action--selected:  var(--aalto-base-color__neutral--9);

  /* Action reversed colours on light */
  --aalto-alias-color__schema-on-light-action-rev--action-rev:    var(--aalto-base-color__neutral--1);
  --aalto-alias-color__schema-on-light-action-rev--hover-rev:     var(--aalto-base-color__tint--white-tint-1);
  --aalto-alias-color__schema-on-light-action-rev--active-rev:    var(--aalto-base-color__tint--white-tint-2);
  --aalto-alias-color__schema-on-light-action-rev--disabled-rev:  var(--aalto-base-color__neutral--5);
  --aalto-alias-color__schema-on-light-action-rev--selected-rev:  var(--aalto-base-color__neutral--1);

  /* Basic colours on dark */
  --aalto-alias-color__schema-on-dark-basic--background:       var(--aalto-base-color__neutral--8);
  --aalto-alias-color__schema-on-dark-basic--background-tint:  var(--aalto-base-color__neutral--7);
  --aalto-alias-color__schema-on-dark-basic--foreground:       var(--aalto-base-color__neutral--1);
  --aalto-alias-color__schema-on-dark-basic--foreground-tint:  var(--aalto-base-color__neutral--4);
  --aalto-alias-color__schema-on-dark-basic--surface:          var(--aalto-base-color__neutral--7);
  --aalto-alias-color__schema-on-dark-basic--subtle:           var(--aalto-base-color__neutral--6);
  --aalto-alias-color__schema-on-dark-basic--overlay:          var(--aalto-base-color__transparent--darkening-4);

  /* Action colours on dark */
  --aalto-alias-color__schema-on-dark-action--action:    var(--aalto-base-color__neutral--1);
  --aalto-alias-color__schema-on-dark-action--hover:     var(--aalto-base-color__tint--white-tint-1);
  --aalto-alias-color__schema-on-dark-action--active:    var(--aalto-base-color__tint--white-tint-2);
  --aalto-alias-color__schema-on-dark-action--disabled:  var(--aalto-base-color__neutral--6);
  --aalto-alias-color__schema-on-dark-action--selected:  var(--aalto-base-color__neutral--1);

  /* Action reversed colours on dark */
  --aalto-alias-color__schema-on-dark-action-rev--action-rev:    var(--aalto-base-color__neutral--8);
  --aalto-alias-color__schema-on-dark-action-rev--hover-rev:     var(--aalto-base-color__tint--black-tint-3);
  --aalto-alias-color__schema-on-dark-action-rev--active-rev:    var(--aalto-base-color__tint--black-tint-2);
  --aalto-alias-color__schema-on-dark-action-rev--disabled-rev:  var(--aalto-base-color__neutral--5);
  --aalto-alias-color__schema-on-dark-action-rev--selected-rev:  var(--aalto-base-color__neutral--8);
}


/* ============================================================
   THEME TOKENS — Neutral Light (default)
   ============================================================ */

.aalto-semantic-color__theme--neutral.aalto-semantic-color__theme-variant--light,
.aalto-semantic-color__theme-variant--light .aalto-semantic-color__theme--neutral,
:root {
  --aalto-alias-color__theme-neutral-light-basic--background:       var(--aalto-alias-color__schema-on-light-basic--background);
  --aalto-alias-color__theme-neutral-light-basic--background-tint:  var(--aalto-alias-color__schema-on-light-basic--background-tint);
  --aalto-alias-color__theme-neutral-light-basic--foreground:       var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-alias-color__theme-neutral-light-basic--foreground-tint:  var(--aalto-alias-color__schema-on-light-basic--foreground-tint);
  --aalto-alias-color__theme-neutral-light-basic--surface:          var(--aalto-alias-color__schema-on-light-basic--surface);
  --aalto-alias-color__theme-neutral-light-basic--subtle:           var(--aalto-alias-color__schema-on-light-basic--subtle);
  --aalto-alias-color__theme-neutral-light-basic--overlay:          var(--aalto-alias-color__schema-on-light-basic--overlay);
  --aalto-alias-color__theme-neutral-light-action--action:          var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-alias-color__theme-neutral-light-action--hover:           var(--aalto-alias-color__schema-on-light-action--hover);
  --aalto-alias-color__theme-neutral-light-action--active:          var(--aalto-alias-color__schema-on-light-action--active);
  --aalto-alias-color__theme-neutral-light-action--disabled:        var(--aalto-alias-color__schema-on-light-action--disabled);
  --aalto-alias-color__theme-neutral-light-action--selected:        var(--aalto-alias-color__schema-on-light-action--selected);
  --aalto-alias-color__theme-neutral-light-action-rev--action-rev:   var(--aalto-alias-color__schema-on-light-action-rev--action-rev);
  --aalto-alias-color__theme-neutral-light-action-rev--hover-rev:    var(--aalto-alias-color__schema-on-light-action-rev--hover-rev);
  --aalto-alias-color__theme-neutral-light-action-rev--active-rev:   var(--aalto-alias-color__schema-on-light-action-rev--active-rev);
  --aalto-alias-color__theme-neutral-light-action-rev--disabled-rev: var(--aalto-alias-color__schema-on-light-action-rev--disabled-rev);
  --aalto-alias-color__theme-neutral-light-action-rev--selected-rev: var(--aalto-alias-color__schema-on-light-action-rev--selected-rev);

  /* Semantic shorthand — use these in your CSS */
  --aalto-col-bg:           var(--aalto-alias-color__theme-neutral-light-basic--background);
  --aalto-col-bg-tint:      var(--aalto-alias-color__theme-neutral-light-basic--background-tint);
  --aalto-col-fg:           var(--aalto-alias-color__theme-neutral-light-basic--foreground);
  --aalto-col-fg-tint:      var(--aalto-alias-color__theme-neutral-light-basic--foreground-tint);
  --aalto-col-surface:      var(--aalto-alias-color__theme-neutral-light-basic--surface);
  --aalto-col-subtle:       var(--aalto-alias-color__theme-neutral-light-basic--subtle);
  --aalto-col-overlay:      var(--aalto-alias-color__theme-neutral-light-basic--overlay);
  --aalto-col-action:       var(--aalto-alias-color__theme-neutral-light-action--action);
  --aalto-col-hover:        var(--aalto-alias-color__theme-neutral-light-action--hover);
  --aalto-col-active:       var(--aalto-alias-color__theme-neutral-light-action--active);
  --aalto-col-disabled:     var(--aalto-alias-color__theme-neutral-light-action--disabled);
  --aalto-col-selected:     var(--aalto-alias-color__theme-neutral-light-action--selected);
  --aalto-col-action-rev:      var(--aalto-alias-color__theme-neutral-light-action-rev--action-rev);
  --aalto-col-hover-rev:       var(--aalto-alias-color__theme-neutral-light-action-rev--hover-rev);
  --aalto-col-active-rev:      var(--aalto-alias-color__theme-neutral-light-action-rev--active-rev);
  --aalto-col-disabled-rev:    var(--aalto-alias-color__theme-neutral-light-action-rev--disabled-rev);
  --aalto-col-selected-rev:    var(--aalto-alias-color__theme-neutral-light-action-rev--selected-rev);
}


/* ============================================================
   THEME TOKENS — Neutral Dark
   ============================================================ */

.aalto-semantic-color__theme--neutral.aalto-semantic-color__theme-variant--dark,
.aalto-semantic-color__theme-variant--dark .aalto-semantic-color__theme--neutral {
  --aalto-col-bg:           var(--aalto-alias-color__schema-on-dark-basic--background);
  --aalto-col-bg-tint:      var(--aalto-alias-color__schema-on-dark-basic--background-tint);
  --aalto-col-fg:           var(--aalto-alias-color__schema-on-dark-basic--foreground);
  --aalto-col-fg-tint:      var(--aalto-alias-color__schema-on-dark-basic--foreground-tint);
  --aalto-col-surface:      var(--aalto-alias-color__schema-on-dark-basic--surface);
  --aalto-col-subtle:       var(--aalto-alias-color__schema-on-dark-basic--subtle);
  --aalto-col-overlay:      var(--aalto-alias-color__schema-on-dark-basic--overlay);
  --aalto-col-action:       var(--aalto-alias-color__schema-on-dark-action--action);
  --aalto-col-hover:        var(--aalto-alias-color__schema-on-dark-action--hover);
  --aalto-col-active:       var(--aalto-alias-color__schema-on-dark-action--active);
  --aalto-col-disabled:     var(--aalto-alias-color__schema-on-dark-action--disabled);
  --aalto-col-selected:     var(--aalto-alias-color__schema-on-dark-action--selected);
  --aalto-col-action-rev:   var(--aalto-alias-color__schema-on-dark-action-rev--action-rev);
  --aalto-col-hover-rev:    var(--aalto-alias-color__schema-on-dark-action-rev--hover-rev);
  --aalto-col-active-rev:   var(--aalto-alias-color__schema-on-dark-action-rev--active-rev);
  --aalto-col-disabled-rev: var(--aalto-alias-color__schema-on-dark-action-rev--disabled-rev);
  --aalto-col-selected-rev: var(--aalto-alias-color__schema-on-dark-action-rev--selected-rev);
}


/* ============================================================
   THEME TOKENS — Brand: Red
   ============================================================ */

.aalto-semantic-color__theme--brand.aalto-semantic-color__theme-variant--red {
  --aalto-col-bg:           var(--aalto-base-color__aalto-brand--aalto-red-1);
  --aalto-col-bg-tint:      var(--aalto-base-color__aalto-brand--aalto-red-1);
  --aalto-col-fg:           var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-fg-tint:      var(--aalto-alias-color__schema-on-light-basic--foreground-tint);
  --aalto-col-surface:      var(--aalto-base-color__aalto-brand--aalto-red-1);
  --aalto-col-subtle:       var(--aalto-base-color__tint--red-tint-2);
  --aalto-col-action:       var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-hover:        var(--aalto-alias-color__schema-on-light-action--hover);
  --aalto-col-active:       var(--aalto-alias-color__schema-on-light-action--active);
  --aalto-col-disabled:     var(--aalto-alias-color__schema-on-light-action--disabled);
  --aalto-col-action-rev:   var(--aalto-base-color__aalto-brand--aalto-red-1);
  --aalto-col-hover-rev:    var(--aalto-base-color__tint--red-tint-1);
  --aalto-col-active-rev:   var(--aalto-base-color__tint--red-tint-2);
}


/* ============================================================
   THEME TOKENS — Brand: Yellow
   ============================================================ */

.aalto-semantic-color__theme--brand.aalto-semantic-color__theme-variant--yellow {
  --aalto-col-bg:           var(--aalto-base-color__aalto-brand--aalto-yellow-1);
  --aalto-col-bg-tint:      var(--aalto-base-color__aalto-brand--aalto-yellow-1);
  --aalto-col-fg:           var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-fg-tint:      var(--aalto-alias-color__schema-on-light-basic--foreground-tint);
  --aalto-col-surface:      var(--aalto-base-color__aalto-brand--aalto-yellow-1);
  --aalto-col-subtle:       var(--aalto-base-color__tint--yellow-tint-2);
  --aalto-col-action:       var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-hover:        var(--aalto-alias-color__schema-on-light-action--hover);
  --aalto-col-active:       var(--aalto-alias-color__schema-on-light-action--active);
  --aalto-col-disabled:     var(--aalto-alias-color__schema-on-light-action--disabled);
  --aalto-col-action-rev:   var(--aalto-base-color__aalto-brand--aalto-yellow-1);
  --aalto-col-hover-rev:    var(--aalto-base-color__tint--yellow-tint-1);
  --aalto-col-active-rev:   var(--aalto-base-color__tint--yellow-tint-2);
}


/* ============================================================
   THEME TOKENS — Brand: Blue
   ============================================================ */

.aalto-semantic-color__theme--brand.aalto-semantic-color__theme-variant--blue {
  --aalto-col-bg:           var(--aalto-base-color__aalto-brand--aalto-blue-1);
  --aalto-col-bg-tint:      var(--aalto-base-color__aalto-brand--aalto-blue-1);
  --aalto-col-fg:           var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-fg-tint:      var(--aalto-alias-color__schema-on-light-basic--foreground-tint);
  --aalto-col-surface:      var(--aalto-base-color__aalto-brand--aalto-blue-1);
  --aalto-col-subtle:       var(--aalto-base-color__tint--blue-tint-2);
  --aalto-col-action:       var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-hover:        var(--aalto-alias-color__schema-on-light-action--hover);
  --aalto-col-active:       var(--aalto-alias-color__schema-on-light-action--active);
  --aalto-col-disabled:     var(--aalto-alias-color__schema-on-light-action--disabled);
  --aalto-col-action-rev:   var(--aalto-base-color__aalto-brand--aalto-blue-1);
  --aalto-col-hover-rev:    var(--aalto-base-color__tint--blue-tint-1);
  --aalto-col-active-rev:   var(--aalto-base-color__tint--blue-tint-2);
}


/* ============================================================
   THEME TOKENS — Brand: Black
   ============================================================ */

.aalto-semantic-color__theme--brand.aalto-semantic-color__theme-variant--black {
  --aalto-col-bg:           var(--aalto-base-color__aalto-brand--aalto-black-1);
  --aalto-col-bg-tint:      var(--aalto-base-color__tint--black-brand-tint-1);
  --aalto-col-fg:           var(--aalto-alias-color__schema-on-dark-basic--foreground);
  --aalto-col-fg-tint:      var(--aalto-alias-color__schema-on-dark-basic--foreground-tint);
  --aalto-col-surface:      var(--aalto-base-color__tint--black-brand-tint-1);
  --aalto-col-subtle:       var(--aalto-base-color__tint--black-brand-tint-2);
  --aalto-col-action:       var(--aalto-alias-color__schema-on-dark-action--action);
  --aalto-col-hover:        var(--aalto-alias-color__schema-on-dark-action--hover);
  --aalto-col-active:       var(--aalto-alias-color__schema-on-dark-action--active);
  --aalto-col-disabled:     var(--aalto-alias-color__schema-on-dark-action--disabled);
  --aalto-col-action-rev:   var(--aalto-base-color__aalto-brand--aalto-black-1);
  --aalto-col-hover-rev:    var(--aalto-base-color__tint--black-brand-tint-1);
  --aalto-col-active-rev:   var(--aalto-base-color__tint--black-brand-tint-2);
}


/* ============================================================
   THEME TOKENS — School themes
   ============================================================ */

.aalto-semantic-color__theme--school.aalto-semantic-color__theme-variant--eng {
  --aalto-col-bg:        var(--aalto-base-color__school--eng-1);
  --aalto-col-fg:        var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-subtle:    var(--aalto-base-color__tint--eng-tint-2);
  --aalto-col-action:    var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-action-rev: var(--aalto-base-color__school--eng-1);
}

.aalto-semantic-color__theme--school.aalto-semantic-color__theme-variant--elec {
  --aalto-col-bg:        var(--aalto-base-color__school--elec-1);
  --aalto-col-fg:        var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-subtle:    var(--aalto-base-color__tint--elec-tint-2);
  --aalto-col-action:    var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-action-rev: var(--aalto-base-color__school--elec-1);
}

.aalto-semantic-color__theme--school.aalto-semantic-color__theme-variant--chem {
  --aalto-col-bg:        var(--aalto-base-color__school--chem-1);
  --aalto-col-fg:        var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-subtle:    var(--aalto-base-color__tint--chem-tint-2);
  --aalto-col-action:    var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-action-rev: var(--aalto-base-color__school--chem-1);
}

.aalto-semantic-color__theme--school.aalto-semantic-color__theme-variant--arts {
  --aalto-col-bg:        var(--aalto-base-color__school--arts-1);
  --aalto-col-fg:        var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-subtle:    var(--aalto-base-color__tint--arts-tint-2);
  --aalto-col-action:    var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-action-rev: var(--aalto-base-color__school--arts-1);
}

.aalto-semantic-color__theme--school.aalto-semantic-color__theme-variant--biz {
  --aalto-col-bg:        var(--aalto-base-color__school--biz-1);
  --aalto-col-fg:        var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-subtle:    var(--aalto-base-color__tint--biz-tint-2);
  --aalto-col-action:    var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-action-rev: var(--aalto-base-color__school--biz-1);
}

.aalto-semantic-color__theme--school.aalto-semantic-color__theme-variant--sci {
  --aalto-col-bg:        var(--aalto-base-color__school--sci-1);
  --aalto-col-fg:        var(--aalto-alias-color__schema-on-light-basic--foreground);
  --aalto-col-subtle:    var(--aalto-base-color__tint--sci-tint-2);
  --aalto-col-action:    var(--aalto-alias-color__schema-on-light-action--action);
  --aalto-col-action-rev: var(--aalto-base-color__school--sci-1);
}


/* ============================================================
   TYPOGRAPHY — Web font import (Inter via Google Fonts)
   Import Inter in your HTML <head> before this stylesheet:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Code+Pro:wght@400&display=swap" rel="stylesheet">
   ============================================================ */

/* --- Body styles --- */

.aalto-text--xl {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 400;
  font-size: var(--aalto-base-font-size--5);       /* 1.5rem / 24px */
  line-height: var(--aalto-base-line-height--5);   /* 2.5rem / 40px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--large {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 400;
  font-size: var(--aalto-base-font-size--4);       /* 1.25rem / 20px */
  line-height: var(--aalto-base-line-height--4);   /* 2rem / 32px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--default {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 400;
  font-size: var(--aalto-base-font-size--3);       /* 1.125rem / 18px */
  line-height: var(--aalto-base-line-height--3);   /* 1.75rem / 28px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--default-bold {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--3);       /* 1.125rem / 18px */
  line-height: var(--aalto-base-line-height--3);   /* 1.75rem / 28px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--small {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 400;
  font-size: var(--aalto-base-font-size--2);       /* 1rem / 16px */
  line-height: var(--aalto-base-line-height--2);   /* 1.5rem / 24px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--small-bold {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--2);       /* 1rem / 16px */
  line-height: var(--aalto-base-line-height--2);   /* 1.5rem / 24px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--xs {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 400;
  font-size: var(--aalto-base-font-size--1);       /* 0.875rem / 14px */
  line-height: var(--aalto-base-line-height--1);   /* 1rem / 16px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--button {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--2);       /* 1rem / 16px */
  line-height: var(--aalto-base-line-height--1);   /* 1rem / 16px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--accent {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--4);       /* 1.25rem / 20px */
  line-height: var(--aalto-base-line-height--2);   /* 1.5rem / 24px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

.aalto-text--code {
  font-family: var(--aalto-base-font-family--source-code-pro);
  font-weight: 400;
  font-size: var(--aalto-base-font-size--3);       /* 1.125rem / 18px */
  line-height: var(--aalto-base-line-height--3);   /* 1.75rem / 28px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

/* --- Title styles (mobile first) --- */

h1, .aalto-title--h1 {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--6);       /* 2rem / 32px mobile */
  line-height: var(--aalto-base-line-height--5);   /* 2.5rem / 40px */
  letter-spacing: var(--aalto-base-letter-spacing--2); /* -1px */
}

h2, .aalto-title--h2 {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--5);       /* 1.5rem / 24px mobile */
  line-height: var(--aalto-base-line-height--4);   /* 2rem / 32px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

h3, .aalto-title--h3 {
  font-family: var(--aalto-base-font-family--inter);
  font-weight: 700;
  font-size: var(--aalto-base-font-size--4);       /* 1.25rem / 20px mobile */
  line-height: var(--aalto-base-line-height--2);   /* 1.5rem / 24px */
  letter-spacing: var(--aalto-base-letter-spacing--1);
}

/* Desktop title sizes */
@media (min-width: 992px) {
  h1, .aalto-title--h1 {
    font-size: var(--aalto-base-font-size--7);     /* 4rem / 64px */
    line-height: var(--aalto-base-line-height--7); /* 4.5rem / 72px */
    letter-spacing: var(--aalto-base-letter-spacing--3); /* -2px */
  }

  h2, .aalto-title--h2 {
    font-size: var(--aalto-base-font-size--6);     /* 2rem / 32px */
    line-height: var(--aalto-base-line-height--6); /* 3rem / 48px */
    letter-spacing: var(--aalto-base-letter-spacing--2); /* -1px */
  }

  h3, .aalto-title--h3 {
    font-size: var(--aalto-base-font-size--5);     /* 1.5rem / 24px */
    line-height: var(--aalto-base-line-height--3); /* 1.75rem / 28px */
    letter-spacing: var(--aalto-base-letter-spacing--1);
  }
}


/* ============================================================
   LAYOUT — Grid & container
   ============================================================ */

.aalto-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--aalto-base-dimension--3); /* 1rem mobile */
}

@media (min-width: 768px) {
  .aalto-container {
    padding-inline: var(--aalto-base-dimension--4); /* 1.5rem tablet */
  }
}

@media (min-width: 992px) {
  .aalto-container {
    padding-inline: var(--aalto-base-dimension--6); /* 2.5rem desktop */
    max-width: 1616px;
  }
}

/* 12-column grid */
.aalto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2-col mobile */
  gap: var(--aalto-base-dimension--3);   /* 1rem */
}

@media (min-width: 768px) {
  .aalto-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--aalto-base-dimension--3);
  }
}

@media (min-width: 992px) {
  .aalto-grid {
    gap: var(--aalto-base-dimension--4); /* 1.5rem desktop */
  }
}

/* Section spacing */
.aalto-section {
  padding-block: var(--aalto-base-dimension--4); /* 1.5rem mobile */
}

@media (min-width: 992px) {
  .aalto-section {
    padding-block: var(--aalto-base-dimension--5); /* 2rem desktop */
  }
}

@media (min-width: 1616px) {
  .aalto-section {
    padding-block: var(--aalto-base-dimension--6); /* 2.5rem XL */
  }
}