/* FacilityOS - the brand every page shares: typeface, palette, the few rules.
 *
 * The spec is 07-video-style-font-logo.md. Monochrome ink on white with one
 * blue accent (--fx-acc) and one green (--fx-grn); red only for a failure.
 * Engineering-drawing register: hairlines, thin outlines, flat faces,
 * wide-tracked all-caps micro-labels. No gradients, no shadows. "Fast" is
 * always green.
 *
 * Served at /brand/ outside the login (auth._PUBLIC_PREFIXES) so the sign-in
 * page wears it too. Pages keep their own variable names and point them here.
 *
 * Inter and Inter Display 4.1 (rsms/inter, SIL OFL 1.1 - fonts/LICENSE-Inter.txt).
 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/brand/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/brand/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/brand/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/brand/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 100 500; font-display: swap;
  src: url("/brand/fonts/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("/brand/fonts/InterDisplay-SemiBold.woff2") format("woff2"); }

:root {
  --fx-ink: #161616;     /* primary text, outlines, the wordmark */
  --fx-ink2: #6F6F6F;    /* secondary text, captions, tracked section labels */
  --fx-ink3: #B9B9B9;    /* tertiary, ghosted, dashed link lines */
  --fx-hair: #DCDCDC;    /* hairlines, dividers */
  --fx-grid: #E7E7E7;    /* the background square grid */
  --fx-acc: #1F57F0;     /* blue: numbers, active states, highlights */
  --fx-grn: #1B9E5A;     /* green: "Fast", resolved / pass */
  --fx-red: #D93025;     /* a failure, which resolves to green */
  --fx-face1: #F7F7F7;   /* light face fill: panels, iso faces */
  --fx-face2: #ECECEC;   /* darker face fill */
  --fx-bg: #FFFFFF;      /* always white */

  /* tints of the two accents for fills behind text (selection, a pass row) */
  --fx-acc-tint: #EEF2FE;
  --fx-grn-tint: #EAF6EF;
  --fx-red-tint: #FCEDEC;

  --fx-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Consolas, monospace;

  --fx-grid-size: 48px;
  --fx-ease: cubic-bezier(.65, 0, .35, 1);   /* ease-in-out cubic */
  --fx-radius: 2px;
  accent-color: var(--fx-acc);   /* checkboxes, radios, ranges, progress */
}
::selection { background: var(--fx-acc-tint); color: var(--fx-ink); }

/* ------------------------------------------------------------------ type */
/* Headlines: Inter Display 600, negative tracking. */
.fx-display { font-family: var(--fx-display); font-weight: 600; letter-spacing: -.028em; color: var(--fx-ink); }
/* Micro-labels: UPPERCASE, Inter 600, wide positive tracking, middle-dot separators. */
.fx-caps { font: 600 11px/1.35 var(--fx-sans); letter-spacing: .17em; text-transform: uppercase; color: var(--fx-ink2); }
.fx-fine { font: 600 9.5px/1.35 var(--fx-sans); letter-spacing: .126em; text-transform: uppercase; color: var(--fx-ink2); }
.fx-num { font-variant-numeric: tabular-nums; }
.fx-acc { color: var(--fx-acc); }
.fx-fast { color: var(--fx-grn); }

/* The faint square grid every frame sits on. */
.fx-grid {
  background-color: var(--fx-bg);
  background-image:
    linear-gradient(to right, var(--fx-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fx-grid) 1px, transparent 1px);
  background-size: var(--fx-grid-size) var(--fx-grid-size);
}

/* ------------------------------------------------------------------ the lockup */
/* The mark (two overlapping square frames) beside the "FacilityOS" wordmark.
   The original logo image was never supplied; this is the spec's text
   fallback, Inter Display 600. */
.fx-lockup { display: inline-flex; align-items: center; gap: .42em; color: var(--fx-ink);
  text-decoration: none; font: 600 19px/1 var(--fx-display); letter-spacing: -.014em; white-space: nowrap; }
.fx-lockup svg { width: 1.05em; height: 1.05em; flex: none; display: block; }