/* The Dudley College Network — theme tokens (contract v0.2). Generated by build_tokens.py from the Dudley College teardown, 2026-10-02. Edit the builder, not this file. */
[data-theme="dct"], :root {
  /* brand — raw colours from https://dudleycol.ac.uk */
  --net-brand-charcoal: #2E2D2C;
  --net-brand-body: #50535A;
  --net-brand-studentgrey: #C3C3C3;
  --net-brand-grey: #E5E5E5;
  --net-brand-blue: #11B6EA;
  --net-brand-green: #6BB64E;
  --net-brand-red: #DE3000;
  --net-brand-yellow: #FAB60D;
  --net-brand-orange: #F39222;
  --net-brand-eventorange: #E94E1B;
  /* roles — the only names components may use */
  --net-ink: #2E2D2C;
  --net-ink-2: #50535A;
  --net-ink-3: #62656C;
  --net-ground: #FFFFFF;
  --net-ground-2: #F2F2F2;
  --net-surface: #FFFFFF;
  --net-rule: #DADADA;
  --net-band: #2E2D2C;
  --net-band-ink: #FFFFFF;
  --net-band-ink-2: #C3C3C3;
  --net-primary: #2E2D2C;
  --net-primary-ink: #FFFFFF;
  --net-accent: #086E90;
  --net-accent-ink: #FFFFFF;
  --net-link: #2E2D2C;
  --net-focus: #086E90;
  --net-tile-link: #2E2D2C;
  --net-display-panel: #11B6EA;
  --net-display-panel-ink: #2E2D2C;
  --net-connective: #11B6EA;
  --net-marker: #2E2D2C;
  /* tints — wall-card tiles; formula 10% / 20% into white */
  --net-tint-green: #F0F8ED;
  --net-tint-green-fade: #E1F0DC;
  --net-tint-green-base: #6BB64E;
  --net-tint-red: #FCEAE6;
  --net-tint-red-fade: #F8D6CC;
  --net-tint-red-base: #DE3000;
  --net-tint-blue: #E7F8FD;
  --net-tint-blue-fade: #CFF0FB;
  --net-tint-blue-base: #11B6EA;
  --net-tint-yellow: #FEF8E7;
  --net-tint-yellow-fade: #FEF0CF;
  --net-tint-yellow-base: #FAB60D;
  --net-tint-orange: #FEF4E9;
  --net-tint-orange-fade: #FDE9D3;
  --net-tint-orange-base: #F39222;
  /* strands — article categories with their own look (label ground + rule) */
  --net-strand-the-changing-workplace: #E7F8FD;
  --net-strand-the-changing-workplace-base: #11B6EA;
  /* type */
  --net-font-display: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --net-font-display-weight: 700;
  --net-font-display-case: none;
  --net-font-display-tracking: -0.01em;
  --net-font-display-leading: 1.08;
  --net-font-display-adjust: 0.95;
  --net-font-body: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --net-font-body-leading: 1.55;
  --net-font-accent: var(--net-font-body);
  --net-font-accent-colour: var(--net-accent);
  --net-eyebrow-size: var(--net-size-eyebrow); --net-eyebrow-weight: 700; --net-eyebrow-case: uppercase; --net-eyebrow-tracking: 0.12em; --net-eyebrow-leading: 1.3;
  /* devices — which of the college's signature moves this theme uses */
  --net-device-hero: tile;
  --net-device-marker: 0;
  --net-device-slice: 0;
  --net-masthead-on-band: 0;
  /* shape */
  --net-radius-card: 0px;
  --net-radius-button: 20px;
  --net-radius-input: 4px;
  --net-radius-pill: 20px;
  --net-radius-circle: 50%;
  --net-radius-portrait: 50%;
  /* system (fixed across colleges — do not override per theme) */
  --net-space-1: 4px;
  --net-space-2: 8px;
  --net-space-3: 12px;
  --net-space-4: 16px;
  --net-space-5: 24px;
  --net-space-6: 32px;
  --net-space-7: 48px;
  --net-space-8: 64px;
  --net-space-9: 96px;
  --net-size-eyebrow: clamp(12px, calc(12px + (13 - 12) * ((100vw - 390px) / 730)), 13px);
  --net-size-small: clamp(14px, calc(14px + (14 - 14) * ((100vw - 390px) / 730)), 14px);
  --net-size-body: clamp(17px, calc(17px + (17 - 17) * ((100vw - 390px) / 730)), 17px);
  --net-size-lead: clamp(19px, calc(19px + (20 - 19) * ((100vw - 390px) / 730)), 20px);
  --net-size-h3: clamp(20px, calc(20px + (22 - 20) * ((100vw - 390px) / 730)), 22px);
  --net-size-h2: clamp(23px, calc(23px + (26 - 23) * ((100vw - 390px) / 730)), 26px);
  --net-size-h1: clamp(28px, calc(28px + (34 - 28) * ((100vw - 390px) / 730)), 34px);
  --net-size-cover: clamp(30px, calc(30px + (40 - 30) * ((100vw - 390px) / 730)), 40px);
  --net-size-hero: clamp(36px, calc(36px + (56 - 36) * ((100vw - 390px) / 730)), 56px);
  --net-tap-min: 44px;
  --net-email-container: 660px;
  --net-lockup: side;  /* side | stacked — read by the masthead */
}

/* display type helper — applies the theme's face, case, tracking, leading and optical size adjust in one go */
.net-display { font-family: var(--net-font-display); font-weight: var(--net-font-display-weight); font-stretch: var(--net-font-display-stretch, 100%); text-transform: var(--net-font-display-case); letter-spacing: var(--net-font-display-tracking); line-height: var(--net-font-display-leading); text-wrap: balance; }
.net-body { font-family: var(--net-font-body); line-height: var(--net-font-body-leading); color: var(--net-ink); }
.net-eyebrow { font-family: var(--net-font-accent); color: var(--net-font-accent-colour); font-size: var(--net-eyebrow-size); font-weight: var(--net-eyebrow-weight); text-transform: var(--net-eyebrow-case); letter-spacing: var(--net-eyebrow-tracking); line-height: var(--net-eyebrow-leading); }
.net-band { background: var(--net-band); color: var(--net-band-ink); }
.net-band a { color: var(--net-band-ink); }
:focus-visible { outline: 3px solid var(--net-focus); outline-offset: 2px; }
/* tile classes — a wall card wears one; components read --tile, --tile-fade, --tile-base, --tile-ink */
.tint-green { --tile: var(--net-tint-green); --tile-fade: var(--net-tint-green-fade); --tile-base: var(--net-tint-green-base); --tile-ink: #2E2D2C; }
.tint-red { --tile: var(--net-tint-red); --tile-fade: var(--net-tint-red-fade); --tile-base: var(--net-tint-red-base); --tile-ink: #FFFFFF; }
.tint-blue { --tile: var(--net-tint-blue); --tile-fade: var(--net-tint-blue-fade); --tile-base: var(--net-tint-blue-base); --tile-ink: #2E2D2C; }
.tint-yellow { --tile: var(--net-tint-yellow); --tile-fade: var(--net-tint-yellow-fade); --tile-base: var(--net-tint-yellow-base); --tile-ink: #2E2D2C; }
.tint-orange { --tile: var(--net-tint-orange); --tile-fade: var(--net-tint-orange-fade); --tile-base: var(--net-tint-orange-base); --tile-ink: #2E2D2C; }
/* strand classes — a card or kicker in such a category wears one; components read --strand, --strand-base */
.strand-the-changing-workplace { --strand: var(--net-strand-the-changing-workplace); --strand-base: var(--net-strand-the-changing-workplace-base); }