/* The Derby College Network — theme tokens (contract v0.2). Generated by build_tokens.py from the Derby College teardown, 2026-10-02. Edit the builder, not this file. */
[data-theme="dby"], :root {
  /* brand — raw colours from https://www.derby-college.ac.uk */
  --net-brand-navy: #11284A;
  --net-brand-gold: #DDB008;
  --net-brand-darkgold: #917300;
  --net-brand-body: #212529;
  --net-brand-charcoal: #343A40;
  --net-brand-light: #F8F9FA;
  --net-brand-grey: #E9ECEF;
  --net-brand-teal: #66CCCC;
  --net-brand-orange: #FF6600;
  --net-brand-pink: #FF8FC9;
  --net-brand-yellow: #FFCC00;
  --net-brand-magenta: #E50076;
  /* roles — the only names components may use */
  --net-ink: #11284A;
  --net-ink-2: #3F4F66;
  --net-ink-3: #5B6779;
  --net-ground: #FFFFFF;
  --net-ground-2: #F8F9FA;
  --net-surface: #FFFFFF;
  --net-rule: #DEE2E6;
  --net-band: #11284A;
  --net-band-ink: #FFFFFF;
  --net-band-ink-2: #A9B8CF;
  --net-primary: #11284A;
  --net-primary-ink: #FFFFFF;
  --net-accent: #917300;
  --net-accent-ink: #FFFFFF;
  --net-link: #11284A;
  --net-focus: #917300;
  --net-tile-link: #11284A;
  --net-display-panel: #DDB008;
  --net-display-panel-ink: #11284A;
  --net-connective: #DDB008;
  --net-marker: #11284A;
  /* tints — wall-card tiles; formula 10% / 20% into white */
  --net-tint-gold: #FCF7E6;
  --net-tint-gold-fade: #F8EFCE;
  --net-tint-gold-base: #DDB008;
  --net-tint-teal: #F0FAFA;
  --net-tint-teal-fade: #E0F5F5;
  --net-tint-teal-base: #66CCCC;
  --net-tint-orange: #FFF0E6;
  --net-tint-orange-fade: #FFE0CC;
  --net-tint-orange-base: #FF6600;
  --net-tint-pink: #FFF4FA;
  --net-tint-pink-fade: #FFE9F4;
  --net-tint-pink-base: #FF8FC9;
  --net-tint-magenta: #FCE6F1;
  --net-tint-magenta-fade: #FACCE4;
  --net-tint-magenta-base: #E50076;
  --net-tint-navy: #E7EAED;
  --net-tint-navy-fade: #CFD4DB;
  --net-tint-navy-base: #11284A;
  /* strands — article categories with their own look (label ground + rule) */
  --net-strand-the-changing-workplace: #F0FAFA;
  --net-strand-the-changing-workplace-base: #66CCCC;
  /* type */
  --net-font-display: 'Poppins', '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.22;
  --net-font-display-adjust: 1.0;
  --net-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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: 1;
  /* shape */
  --net-radius-card: 4px;
  --net-radius-button: 4px;
  --net-radius-input: 4px;
  --net-radius-pill: 160px;
  --net-radius-circle: 50%;
  --net-radius-portrait: 4px;
  /* 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-gold { --tile: var(--net-tint-gold); --tile-fade: var(--net-tint-gold-fade); --tile-base: var(--net-tint-gold-base); --tile-ink: #11284A; }
.tint-teal { --tile: var(--net-tint-teal); --tile-fade: var(--net-tint-teal-fade); --tile-base: var(--net-tint-teal-base); --tile-ink: #11284A; }
.tint-orange { --tile: var(--net-tint-orange); --tile-fade: var(--net-tint-orange-fade); --tile-base: var(--net-tint-orange-base); --tile-ink: #11284A; }
.tint-pink { --tile: var(--net-tint-pink); --tile-fade: var(--net-tint-pink-fade); --tile-base: var(--net-tint-pink-base); --tile-ink: #11284A; }
.tint-magenta { --tile: var(--net-tint-magenta); --tile-fade: var(--net-tint-magenta-fade); --tile-base: var(--net-tint-magenta-base); --tile-ink: #FFFFFF; }
.tint-navy { --tile: var(--net-tint-navy); --tile-fade: var(--net-tint-navy-fade); --tile-base: var(--net-tint-navy-base); --tile-ink: #FFFFFF; }
/* 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); }