/* ============================================================
   BLUEDOOR INDUSTRIES — Design Tokens (Navy Edition)
   Palette + type as CSS custom properties. Import once at the
   root of the site, then reference with var(--token).
   ============================================================ */
:root{
  /* --- Core palette --- */
  --navy:#17365C;          /* primary brand navy */
  --navy-bright:#2E4E7C;   /* one step brighter — use on dark grounds */
  --muted:#556F92;         /* muted steel — secondary text; INDUSTRIES on light */
  --cream:#EFE7D6;         /* warm reversed default (mark + wordmark on dark) */
  --cream-mute:#CBB99B;    /* muted cream — INDUSTRIES on dark */
  --warm:#F5F1E8;          /* warm paper background */
  --warm-2:#FDFCF9;        /* lightest paper */
  --ink:#1E2A38;           /* body text on light grounds */
  --deep:#14161C;          /* deep panel / near-black background */
  --white:#FFFFFF;         /* crisp reversed alternate */
  --line:#E4DCC9;          /* hairline rules on light */
  --dk-mute:#9BAAC2;       /* muted blue-grey text on navy (body, not lockups) */

  /* --- Type --- */
  --serif:Georgia, Gelasio, 'Times New Roman', serif;   /* headings + wordmark */
  --sans:Arial, 'Helvetica Neue', Arimo, sans-serif;    /* body + labels */

  /* --- Optional scale helpers --- */
  --maxw:1160px;
  --radius:8px;
}

/* ------------------------------------------------------------
   LOCKUP COLOUR RULE (important):
   On BLUE (navy) or dark grounds the lockup is WHITE and monochrome —
   the mark AND the wordmark are white; INDUSTRIES is a muted light tint.
     • On navy / dark : mark #fff · BLUEDOOR #fff · INDUSTRIES var(--dk-mute)
     • On light       : mark var(--navy) · BLUEDOOR var(--navy) · INDUSTRIES var(--muted)
   NEVER mix hues within a lockup (e.g. a white mark with a cream name).
   (Cream stays a brand colour for backgrounds/accents — just not for the lockup.)
   ------------------------------------------------------------ */
.on-dark{ background:var(--navy); color:#fff; }
.on-dark .mark, .on-dark .wordmark, .on-dark h1, .on-dark h2{ color:#fff; }
.on-dark .industries{ color:var(--dk-mute); }
.on-light{ background:var(--warm-2); color:var(--ink); }
.on-light .mark, .on-light .wordmark{ color:var(--navy); }
.on-light .industries{ color:var(--muted); }