/* Second Shift brand layer. Source: second-shift-brand-identity.html (V1, Aug 2026)
   and second-shift-brand-guidelines.md. Link this before each option's own CSS. */

@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  /* color */
  --ss-midnight:#0F1D2E;   /* primary dark surface, text on light */
  --ss-midnight-2:#16283C; /* raised dark surface */
  --ss-amber:#F2A33C;      /* worklight: CTA, active, shifted word, key stat */
  --ss-amber-deep:#D8891F; /* amber on light, 18px+ bold only */
  --ss-manila:#E8DCC2;     /* secondary light surface */
  --ss-steel:#64717E;      /* secondary text, captions, rules */
  --ss-paper:#FAF7F0;      /* light ground; the lightest color allowed */
  --ss-line-light:#E3DDCF;
  --ss-line-dark:#2A3B50;
  --ss-muted-dark:#93A1AE; /* secondary text on midnight */
  --ss-resolved:#3E7A55;   /* resolved / approved check only */
  /* type */
  --ss-display:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --ss-body:"IBM Plex Sans","Helvetica Neue",sans-serif;
  --ss-mono:"IBM Plex Mono","Courier New",monospace;
  /* radius */
  --ss-r-card:0px; --ss-r-btn:6px; --ss-r-img:10px; --ss-r-patch:999px;
}

/* Wordmark: SHIFT sits half a step higher. The raised baseline is the logo. */
.ss-wordmark{font-family:var(--ss-display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;line-height:1;white-space:nowrap;color:var(--ss-paper);text-decoration:none}
.ss-wordmark .shifted{display:inline-block;transform:translateY(-.09em);color:var(--ss-amber)}
.ss-wordmark.on-light{color:var(--ss-midnight)}
.ss-wordmark.on-light .shifted{color:var(--ss-amber-deep)}

/* Patch label: the stitched name patch. 1 to 2 per viewport, max. */
.ss-patch{display:inline-block;font-family:var(--ss-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-amber);border:1.5px dashed var(--ss-amber);border-radius:var(--ss-r-patch);padding:6px 16px}
.ss-patch.on-light{color:var(--ss-midnight);border-color:var(--ss-midnight)}

/* Clock line: one place per page, max. */
.ss-clockline{font-family:var(--ss-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-amber)}

:focus-visible{outline:2px solid var(--ss-amber);outline-offset:2px}