/* Fonts (self-hosted; same files the homepage uses) */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/jetbrains-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/jetbrains-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/jetbrains-mono-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/jetbrains-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* colors_and_type.css */
/* =============================================================================
   The Deliberate Company Design System - Colors & Type
   -----------------------------------------------------------------------------
   Canonical tokens derived from the The Deliberate Company Brand Guide (v1 official).
   Source of truth: "The Deliberate Company - Mission, Vision, Values, & Brand Guide"
   Visual direction: industrial warmth - blueprint blue, copper, draft paper.

   PALETTE (see brand guide Sec. Visual Identity -> Color Palette):
     Blueprint Blue  #0B3D6B  - primary. Headers, CTAs, logo lockups.
     Assembly Black  #1C1C1E  - text, primary navigation.
     Copper Accent   #B06A2B  - sparingly: pull quotes, active states, brand moments.
     Steel Gray      #6B7280  - secondary text, metadata, borders.
     Draft Paper     #F0EDE6  - section backgrounds, warm card surfaces.
     Line White      #FAF8F5  - primary page background. Not cold.

   TYPE (Sec. Typography):
     Inter          - headlines, UI labels, CTAs (Bold/SemiBold/Medium)
     Georgia        - body text, long-form narrative (with italics for editorial voice)
     JetBrains Mono - technical: hex codes, step IDs, contract field names

   Semantic var names preserved (--bg-primary, --base-text, ...) so existing
   components keep working. Dark theme included (inverts surfaces; Blueprint
   holds as primary).
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Brand primitives - THE six colors from the guide
   --------------------------------------------------------------------------- */
:root {
  /* -- Official palette -- */
  --blueprint-blue:   #0B3D6B;   /* RGB 11*61*107 */
  --assembly-black:   #1C1C1E;   /* RGB 28*28*30 */
  --copper-accent:    #B06A2B;   /* RGB 176*106*43 */
  --steel-gray:       #6B7280;   /* RGB 107*114*128 */
  --draft-paper:      #F0EDE6;   /* RGB 240*237*230 */
  --line-white:       #FAF8F5;   /* RGB 250*248*245 */

  /* -- Extended ramp derived from the six above (for UI states) --
     Naming: <family>-<N> where 50 is lightest, 900 darkest.
     These are OkLCH-harmonized tints/shades of the primitives - not Tailwind. */

  /* Blueprint (primary) */
  --blueprint-50:   #EBF1F7;
  --blueprint-100:  #D3E0EC;
  --blueprint-200:  #A6C1D9;
  --blueprint-300:  #6C97BA;
  --blueprint-500:  #1A5A93;
  --blueprint-700:  #0B3D6B;   /* = Blueprint Blue */
  --blueprint-800:  #082E51;
  --blueprint-900:  #051F37;

  /* Copper (accent) */
  --copper-50:      #FAF1E8;
  --copper-100:     #F2DCC2;
  --copper-200:     #E5B889;
  --copper-500:     #C8823E;
  --copper-600:     #B06A2B;   /* = Copper Accent */
  --copper-700:     #8B5320;
  --copper-800:     #683D17;

  /* Ink / Steel (neutrals - warm-cast grays sit next to Draft Paper) */
  --ink-50:         #F5F4F1;   /* slight warmth vs Line White */
  --ink-100:        #E9E7E2;
  --ink-200:        #D4D1CA;   /* borders */
  --ink-300:        #B5B1A8;
  --ink-400:        #8F8B82;
  --ink-500:        #6B7280;   /* = Steel Gray */
  --ink-600:        #4E5560;
  --ink-700:        #353A43;
  --ink-800:        #23262C;
  --ink-900:        #1C1C1E;   /* = Assembly Black */

  /* Status (industrial-warm, not stock Tailwind - sit cleanly next to Copper) */
  --ok-50:          #ECF5EE;
  --ok-500:         #4E8A5C;   /* success */
  --ok-700:         #345F3F;

  --caution-50:     #FBF3E0;
  --caution-500:    #C78A1E;   /* warning (warmer than yellow-500) */
  --caution-700:    #8E5F10;

  --alert-50:       #FCECE7;
  --alert-500:      #B73A2A;   /* danger - brick, not fire */
  --alert-700:      #8A2618;

  --info-50:        #EBF1F7;
  --info-500:       #1A5A93;   /* info = Blueprint-500 */
  --info-700:       #0B3D6B;

  /* -- In-app canonicals (extracted from live tdc.okhenry.ai 2026-04-17) --
     Tokens used inside the logged-in product surface for diagnosis cards,
     stage dots, health badges, and the Plane palette. Kept named so they
     can be referenced from prose ("primary-gap crimson", "plane purple"). */

  /* Crimson - primary-gap accent (Diagnosis Card "primary gap" rows).
     Distinct from --alert-500 brick: deeper, more wine, signals "this is
     where the business is bleeding" rather than "danger, stop." */
  --crimson-50:     #F8ECEC;
  --crimson-500:    #8C2A2A;   /* canonical primary-gap dot/text */
  --crimson-700:    #5E1C1C;

  /* Plane palette - the four planes of business operation per the brand
     guide. Work=Blueprint, Execution=Purple (NEW), Experience=Green, Fit=Copper. */
  --plane-work:        var(--blueprint-700);
  --plane-execution:   #6D28D9;   /* purple - only place purple appears in the system */
  --plane-experience:  #047857;   /* deeper than --ok-500 to read as "experience" */
  --plane-fit:         var(--copper-600);

  /* Health badge palette - 5 canonical states for step contracts on Ops Map.
     Bg is the named color at ~12%, text/dot is the named color at full. */
  --health-strong:    var(--ok-700);          /* contract is robust */
  --health-solid:     var(--blueprint-700);   /* contract is in place */
  --health-gap:       var(--copper-600);      /* contract has known gap */
  --health-weak:      var(--crimson-500);     /* contract is failing */
  --health-missing:   var(--steel-gray);      /* no contract drafted */

  /* Agent voice - the color used for the "Deliberate — <capability>" pill dot
     and any agent-attributed UI. Aliased to Blueprint per canonical tokens. */
  --agent-voice:    var(--blueprint-700);

  /* -- Fonts - three families, never more (brand guide Sec. Typography) -- */
  --font-sans:  Inter, "Inter Variable", InterVariable, ui-sans-serif, system-ui,
                -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", "Liberation Serif", Times, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;

  --font-sans-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}


/* ---------------------------------------------------------------------------
   2. LIGHT theme (default) - semantic token layer
   Existing var names (--bg-primary, --base-text, ...) preserved so components
   written against the Jumpstart-era tokens keep working. Values remapped to
   the The Deliberate Company palette.
   --------------------------------------------------------------------------- */
:root,
.light {
  /* -- Primary (Blueprint Blue) -- */
  --bg-primary:             var(--blueprint-700);
  --bg-primary-hover:       var(--blueprint-800);
  --text-on-primary:        var(--line-white);
  --border-primary:         var(--blueprint-700);
  --border-primary-hover:   var(--blueprint-800);
  --text-primary:           var(--blueprint-700);
  --text-primary-hover:     var(--blueprint-800);
  --logo-primary:           var(--assembly-black);

  /* -- Secondary (paper on paper - warm ghost) -- */
  --bg-secondary:             var(--line-white);
  --text-on-secondary:        var(--assembly-black);
  --bg-secondary-hover:       var(--ink-50);
  --text-on-secondary-hover:  var(--assembly-black);
  --border-secondary:         var(--ink-200);

  /* -- Accent (Copper - sparingly!) -- */
  --bg-accent:                var(--copper-600);
  --bg-accent-hover:          var(--copper-700);
  --text-on-accent:           var(--line-white);
  --border-accent:            var(--copper-600);
  --text-accent:              var(--copper-600);

  /* -- Danger / Success / Warning / Info (industrial-warm status) -- */
  --bg-danger:                 var(--alert-500);
  --bg-danger-hover:           var(--alert-700);
  --text-on-danger:            var(--line-white);
  --border-danger:             var(--alert-500);
  --text-danger:               var(--alert-700);
  --bg-danger-secondary:       var(--alert-50);
  --text-on-danger-secondary:  var(--alert-700);
  --icon-on-danger-secondary:  var(--alert-500);

  --bg-success:                var(--ok-500);
  --bg-success-hover:          var(--ok-700);
  --text-on-success:           var(--line-white);
  --border-success:            var(--ok-500);
  --text-success:              var(--ok-700);
  --bg-success-secondary:      var(--ok-50);
  --text-on-success-secondary: var(--ok-700);
  --icon-on-success-secondary: var(--ok-500);

  --bg-warning-secondary:       var(--caution-50);
  --text-on-warning-secondary:  var(--caution-700);
  --icon-on-warning-secondary:  var(--caution-500);
  --text-warning:               var(--caution-700);

  --bg-info-secondary:          var(--info-50);
  --text-on-info-secondary:     var(--info-700);
  --icon-on-info-secondary:     var(--info-500);

  /* -- Light / Dark surfaces (ink-on-paper) -- */
  --bg-light:           var(--line-white);
  --bg-light-hover:     var(--draft-paper);
  --text-on-light:      var(--assembly-black);
  --border-light:       var(--ink-200);

  --bg-dark:            var(--assembly-black);
  --bg-dark-secondary:  var(--ink-700);
  --bg-dark-hover:      var(--ink-800);
  --text-on-dark:       var(--line-white);
  --border-dark:        var(--ink-700);

  /* -- Disabled -- */
  --bg-disabled:          var(--ink-100);
  --bg-disabled-selected: var(--ink-300);
  --border-disabled:      var(--ink-200);
  --icon-disabled:        var(--ink-300);

  /* -- Base tokens (the workhorse set) -- */
  --base-text:              var(--assembly-black);
  --base-text-secondary:    var(--ink-700);
  --base-text-tertiary:     var(--steel-gray);
  --base-text-disabled:     var(--ink-300);
  --base-icon:              var(--steel-gray);
  --base-bg-backdrop:       rgba(28, 28, 30, 0.5);
  --base-bg-highest:        var(--ink-200);
  --base-bg-high:           var(--draft-paper);
  --base-bg-base:           var(--line-white);     /* page bg */
  --base-bg-low:            #FFFFFF;                /* cards on page */
  --base-bg-lowest:         var(--line-white);
  --base-bg-warm:           var(--draft-paper);    /* "paper" surface */
  --base-border-primary:    var(--ink-300);
  --base-border-secondary:  var(--ink-200);
  --base-border-tertiary:   var(--ink-200);
  --base-border-focus:      var(--blueprint-500);
  --base-bg-selected:       var(--blueprint-50);
  --base-bg-hover:          var(--ink-50);
  --base-bg-tooltip:        var(--assembly-black);
  --base-text-on-tooltip:   var(--line-white);

  /* -- Typography scale -- */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;
  --font-size-6xl:  60px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;   /* Inter 800 for display headlines */

  --line-height-tight:  1.08;    /* display */
  --line-height-snug:   1.25;    /* headings */
  --line-height-normal: 1.55;    /* Georgia body (guide Sec. Typography) */

  --letter-spacing-display: -0.022em;
  --letter-spacing-tight:   -0.012em;
  --letter-spacing-wide:     0.14em;   /* eyebrow / metadata */

  /* -- Spacing scale (4px base) -- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* -- Radius - industrial/blueprint aesthetic = LESS rounded -- */
  --radius-xs:   2px;   /* buttons, banners (sharp drafting-table feel) */
  --radius-sm:   3px;   /* inputs, cards */
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-full: 9999px;

  /* -- Shadows - softer, warmer (ink on paper, not glass) -- */
  --shadow-xs:   0 1px 0 rgba(28, 28, 30, 0.04);
  --shadow-sm:   0 1px 2px rgba(28, 28, 30, 0.06), 0 1px 3px rgba(28, 28, 30, 0.04);
  --shadow-md:   0 4px 10px -2px rgba(28, 28, 30, 0.08), 0 2px 4px rgba(28, 28, 30, 0.04);
  --shadow-menu: 0 8px 24px rgba(28, 28, 30, 0.10);
}


/* ---------------------------------------------------------------------------
   3. DARK theme - inverted surfaces; Blueprint holds as primary
   --------------------------------------------------------------------------- */
:root.dark,
.dark {
  color-scheme: dark;

  --bg-primary:           var(--blueprint-500);
  --bg-primary-hover:     var(--blueprint-300);
  --text-on-primary:      var(--line-white);
  --border-primary:       var(--blueprint-500);
  --border-primary-hover: var(--blueprint-300);
  --text-primary:         var(--blueprint-200);
  --text-primary-hover:   var(--blueprint-100);
  --logo-primary:         var(--line-white);

  --bg-secondary:             var(--ink-800);
  --text-on-secondary:        var(--line-white);
  --bg-secondary-hover:       var(--ink-700);
  --text-on-secondary-hover:  var(--line-white);
  --border-secondary:         var(--ink-700);

  --bg-accent:                var(--copper-500);
  --bg-accent-hover:          var(--copper-600);
  --text-on-accent:           var(--line-white);
  --text-accent:              var(--copper-200);

  --bg-danger:                 var(--alert-500);
  --bg-danger-hover:           var(--alert-700);
  --text-danger:               #E8A79A;
  --bg-danger-secondary:       #3A1711;
  --text-on-danger-secondary:  #F2C7BE;
  --icon-on-danger-secondary:  #E8A79A;

  --bg-success:                var(--ok-500);
  --bg-success-hover:          var(--ok-700);
  --text-success:              #AFD0B7;
  --bg-success-secondary:      #14291A;
  --text-on-success-secondary: #C9DFCF;
  --icon-on-success-secondary: #AFD0B7;

  --bg-warning-secondary:       #2E1F07;
  --text-on-warning-secondary:  #EDD9A8;
  --icon-on-warning-secondary:  #D9AE56;

  --bg-info-secondary:          #0A1D30;
  --text-on-info-secondary:     var(--blueprint-100);
  --icon-on-info-secondary:     var(--blueprint-300);

  --bg-light:           var(--ink-200);
  --bg-light-hover:     var(--ink-300);
  --text-on-light:      var(--assembly-black);

  --bg-dark:            var(--ink-900);
  --bg-dark-hover:      var(--ink-800);

  --base-text:              var(--line-white);
  --base-text-secondary:    var(--ink-100);
  --base-text-tertiary:     var(--ink-300);
  --base-text-disabled:     var(--ink-600);
  --base-icon:              var(--ink-300);
  --base-bg-backdrop:       rgba(0, 0, 0, 0.6);
  --base-bg-highest:        var(--ink-600);
  --base-bg-high:           var(--ink-700);
  --base-bg-base:           var(--ink-900);        /* page bg */
  --base-bg-low:            var(--ink-800);        /* cards */
  --base-bg-lowest:         var(--ink-900);
  --base-bg-warm:           #2A2522;               /* warm dark "paper" */
  --base-border-primary:    var(--ink-500);
  --base-border-secondary:  var(--ink-600);
  --base-border-tertiary:   var(--ink-700);
  --base-border-focus:      var(--blueprint-300);
  --base-bg-selected:       #0A1D30;
  --base-bg-hover:          var(--ink-700);
  --base-bg-tooltip:        var(--ink-200);
  --base-text-on-tooltip:   var(--assembly-black);

  background-color: var(--base-bg-base);
}


/* ---------------------------------------------------------------------------
   4. Semantic typography - brand-guide-accurate type stack
   Headlines: Inter. Body: Georgia. Technical: JetBrains Mono.
   --------------------------------------------------------------------------- */
html {
  font-family: var(--font-serif);  /* Georgia - body is serif per brand guide */
  color: var(--base-text);
  background: var(--base-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* UI chrome (nav, buttons, labels, form fields) stays on Inter */
button, input, select, textarea,
nav, .ui, .label, .eyebrow, .metadata,
th, .badge, .pill {
  font-family: var(--font-sans);
}

/* Headlines: Inter, industrial weight */
.font-display,
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
  color: var(--base-text);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* Body - Georgia, generous line-height, warm */
p, .body {
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

em, i, .editorial {
  font-style: italic;
  color: var(--copper-600);   /* pull quotes + editorial italics = copper per guide */
}

small, .small { font-size: var(--font-size-sm); line-height: 1.45; }
.tiny         { font-size: var(--font-size-xs); line-height: 1.35; }

/* Eyebrow - small caps Inter, copper (per brand guide practice) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--copper-600);
}

/* Metadata - Inter medium, tracked */
.metadata {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--base-text-tertiary);
  text-transform: uppercase;
}

/* Pull quote - Georgia italic with copper left rule */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--copper-600);
  border-left: 2px solid var(--copper-600);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
}

.link {
  color: var(--blueprint-700);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover, .link:focus {
  color: var(--copper-600);
}

/* Technical (contract fields, step IDs, hex codes) - JetBrains Mono */
code, .code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--base-bg-high);
  color: var(--base-text);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}
pre code {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--base-bg-warm);
  border: 1px solid var(--base-border-tertiary);
  border-radius: var(--radius-sm);
}


/* source/tailwind/components/buttons.css */
/* Hotwire's version of data-disable-with */
button                  .when-disabled { display: none; }
button[disabled]        .when-disabled { display: initial; }
button                  .when-enabled { display: initial; }
button[disabled]        .when-enabled { display: none; }

.btn {
  display: inline-flex;
  padding: 6px 12px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;

  &:hover,
  &:focus {
    cursor: pointer;
  }

  &:focus-visible {
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 60%;
    cursor: not-allowed;
  }

  svg {
    width: 16px;
    height: 16px;
  }
}

.btn-outline {
  box-shadow: 0 0 #0000;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
}

.btn-sm {
  padding: 4px 8px;
}

.btn-small {
  padding: 4px 8px;
}

.btn-lg {
  padding: 10px 14px;
}

.btn-large {
  padding: 10px 14px;
}

.btn-xl {
  padding: 12px 16px;
}

.btn-icon {
  padding: 8px;
  border-radius: 50%;

  &.btn-xs {
    padding: 4px;
  }

  &.btn-sm {
    padding: 10px;
  }

  &.btn-lg {
    padding: 12px;
  }

  &.btn-xl {
    padding: 14px;
  }

  svg {
    width: 24px;
    height: 24px;
  }
}

.btn-expanded {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-block {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-primary {
  background: var(--bg-primary);
  color: var(--text-on-primary);

  &:focus,
  &:hover {
    background: var(--bg-primary-hover);
    color: var(--text-on-primary);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-primary);
    color: var(--text-on-primary);
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-primary-hover);

    &:focus,
    &:hover {
      background: var(--bg-primary-hover);
      color: var(--text-on-primary);
      border: 1px solid var(--bg-primary-hover);
    }
  }
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-on-secondary);
  border: 1px solid var(--border-secondary);

  &:focus,
  &:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-on-secondary-hover);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-secondary);
    color: var(--text-on-secondary);
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-on-secondary);
    border: 1px solid var(--border-secondary);

    &:focus,
    &:hover {
      background: var(--bg-secondary-hover);
      color: var(--text-on-secondary-hover);
    }
  }
}

.btn-tertiary {
  background: var(--bg-secondary);
  color: var(--text-on-secondary);
  border: 1px solid var(--border-secondary);

  &:focus,
  &:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-on-secondary-hover);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-secondary);
    color: var(--text-on-secondary);
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-on-secondary);
    border: 1px solid var(--border-secondary);

    &:focus,
    &:hover {
      background: var(--bg-secondary-hover);
      color: var(--text-on-secondary-hover);
    }
  }
}

.btn-danger {
  background: var(--bg-danger);
  color: var(--text-on-danger);

  &:focus,
  &:hover {
    background: var(--bg-danger-hover);
    color: var(--text-on-danger);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-danger);
    color: var(--text-on-danger);
  }

  &:focus-visible {
    outline: 2px solid var(--border-danger-focus);
    outline-offset: 2px;
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-danger);
    border: 1px solid var(--border-danger);

    &:focus,
    &:hover {
      background: var(--bg-danger-hover);
      color: var(--text-on-danger);
      border: 1px solid var(--bg-danger-hover);
    }
  }
}

.btn-success {
  background: var(--bg-success);
  color: var(--text-on-success);

  &:focus,
  &:hover {
    background: var(--bg-success-hover);
    color: var(--text-on-success);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-success);
    color: var(--text-on-success);
  }

  &:focus-visible {
    outline: 2px solid var(--border-success-focus);
    outline-offset: 2px;
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-success);
    border: 1px solid var(--border-success);

    &:focus,
    &:hover {
      background: var(--bg-success-hover);
      color: var(--text-on-success);
      border: 1px solid var(--bg-success-hover);
    }
  }
}

.btn-light {
  background: var(--bg-light);
  color: var(--text-on-light);
  border: 1px solid var(--border-light);

  &:focus,
  &:hover {
    background: var(--bg-light-hover);
    color: var(--text-on-light);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-light);
    color: var(--text-on-light);
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-on-light-outline);
    border: 1px solid var(--border-light);

    &:focus,
    &:hover {
      background: var(--bg-light-hover);
      color: var(--text-on-light);
    }
  }
}

.btn-white {
  background: var(--bg-light);
  color: var(--text-on-light);
  border: 1px solid var(--border-light);

  &:focus,
  &:hover {
    background: var(--bg-light-hover);
    color: var(--text-on-light);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-light);
    color: var(--text-on-light);
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-on-light-outline);
    border: 1px solid var(--border-light);

    &:focus,
    &:hover {
      background: var(--bg-light-hover);
      color: var(--text-on-light);
    }
  }
}

.btn-gray {
  background: var(--bg-light);
  color: var(--text-on-light);
  border: 1px solid var(--border-light);

  &:focus,
  &:hover {
    background: var(--bg-light-hover);
    color: var(--text-on-light);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-light);
    color: var(--text-on-light);
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-on-light-outline);
    border: 1px solid var(--border-light);

    &:focus,
    &:hover {
      background: var(--bg-light-hover);
      color: var(--text-on-light);
    }
  }
}

.btn-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border: 1px solid var(--bg-dark);

  &:focus,
  &:hover {
    background: var(--bg-dark-hover);
    color: var(--text-on-dark);
    border: 1px solid var(--bg-dark-hover);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: var(--bg-dark);
    color: var(--text-on-dark);
  }

  &:focus-visible {
    outline: 2px solid var(--border-dark-focus);
    outline-offset: 2px;
  }

  &.btn-outline {
    background: transparent;
    color: var(--text-on-dark-outline);
    border: 1px solid var(--border-dark);

    &:focus,
    &:hover {
      background: var(--bg-dark-hover);
      color: var(--text-on-dark);
    }
  }
}

.btn-link {
  background: transparent;
  color: var(--text-primary);
  box-shadow: 0 0 #0000;

  &:focus,
  &:hover {
    color: var(--text-primary-hover);
  }

  &:disabled:focus,
  &:disabled:hover {
    background: transparent;
    color: var(--text-primary);
  }

  &.btn-icon {
    background: var(--base-bg-lowest);
    border: 1px solid var(--border-primary-hover);

    &:focus,
    &:hover {
      background: var(--base-bg-low);
    }
  }
}


/* source/tailwind/components/pills.css */
.pill {
  border-radius: 9999px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  text-transform: uppercase;
  background: var(--base-bg-highest);
  color: var(--base-text-secondary);
  display: inline-flex;
  gap: 8px;
  align-items: flex-start;
}

.pill-outline {
  background: transparent;
  border: 1px solid var(--base-border-secondary);
  color: var(--base-text-secondary);
}

.pill-primary {
  background: var(--bg-primary-hover);
  color: var(--text-on-primary);

  &.pill-outline {
    background: transparent;
    border: 1px solid var(--border-primary-hover);
    color: var(--text-primary-hover);
  }
}

.pill-secondary {
  background: var(--bg-success-hover);
  color: var(--text-on-success);

  &.pill-outline {
    background: transparent;
    border: 1px solid var(--border-success-focus);
    color: var(--border-success-focus);
  }
}

.pill-tertiary {
  background: var(--bg-dark-secondary);
  color: var(--text-on-dark);

  &.pill-outline {
    background: transparent;
    border: 1px solid var(--base-text-tertiary);
    color: var(--base-text-tertiary);
  }
}

.pill-accent {
  background: var(--bg-accent);
  color: var(--text-on-accent);

  &.pill-outline {
    background: transparent;
    border: 1px solid var(--border-accent);
    color: var(--text-accent);
  }
}


/* Site-wide */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--base-bg-base); }
a { color: var(--blueprint-700); text-decoration: none; }
a:hover { color: var(--copper-600); }
.company-link { color: inherit; }
.company-link:hover { color: var(--copper-600); }

/* Narrow-viewport fallback. The designs are laid out for desktop; below 860px collapse the
   multi-column grids to one column and let the nav and footer wrap. */
@media (max-width: 860px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  nav[data-screen-label="Nav"], nav[data-screen-label="Nav"] > div,
  footer div[style*="justify-content: space-between"] { flex-wrap: wrap; }
  nav[data-screen-label="Nav"] > div { gap: 12px 18px; }
  h1 { font-size: 40px !important; }
  h2 { font-size: 28px !important; }
  [style*="padding: 40px 44px"], [style*="padding: 48px 52px"],
  [style*="padding: 32px 36px"], [style*="padding: 32px 40px"] { padding: 24px !important; }
}