/* ===========================================================================
   ABC Corp brand layer: the typeface, and the browser surfaces nobody draws.

   The palette itself lives in styles.css. Everything in it was sampled from the
   supplied artwork rather than invented - the wordmark's near-black (#0c0c0d),
   the grey of the tower strokes (#9a9b9f) and the teal of the star (#3fa0a9).

   The display face is Jost, self-hosted. The logo is drawn in a geometric
   Futura-lineage sans - note the pointed apex on the A and the perfect-circle
   C - and Jost is the closest open face to that construction. The platform sans
   is not the display voice of this page.
   =========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --display: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* ------------------------------------------------- browser surfaces
   The parts nobody draws still carry the design: selection, the caret, the
   scrollbar, the focus ring, and the numerals in anything that gets compared
   down a column. These ship with defaults that belong to no design system. */

::selection { background: var(--teal); color: #052225; }

:root { accent-color: var(--teal); caret-color: var(--teal); }

* { scrollbar-width: thin; scrollbar-color: #cdd1d8 transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #cdd1d8; border-radius: 10px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rule-grey); background-clip: content-box; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

a { text-underline-offset: .22em; text-decoration-thickness: from-font; }

/* Times, money, day counts and payroll figures are read down a column. */
time, .num, .clock, .stamp, .punch-clock, [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------ deco bits */

/* Wide-tracked small capitals, as used under the logo mark.
   Used for labels that name a thing - never as a kicker above a heading. */
.deco-label {
  font-family: var(--display);
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal-deep);
}

.deco-rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  margin: 0;
}

/* The four-point star from above the C. Drawn, not a glyph. */
.deco-star {
  position: relative; display: inline-block;
  width: 1em; height: 1em; vertical-align: middle;
}
.deco-star::before, .deco-star::after {
  content: ""; position: absolute; inset: 0; background: var(--teal);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
}
.deco-star::after { transform: rotate(45deg) scale(.55); opacity: .7; }

/* The vertical strokes beside the C, used as page texture. */
.deco-columns { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .55; }
.deco-columns span {
  position: absolute; top: -10%; width: 1px; height: 120%;
  background: linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 72%, transparent);
}