/* Kinex brand kit 1.0, direction Relay, received 2026-10-26.
   design/kinex/README.md holds the rules. This is the one stylesheet of every
   Kinex surface: an app, a site, an email, the HTML frames of a video.

   Stage this file with fonts/ and logo/ next to it, so that the font URLs
   resolve. Never copy a value out of this file. Read it through var(). */

@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/redhatdisplay-var-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-var-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrainsmono-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The seven colours. Each one has a job. If a colour has no job on a page,
     take it off. Contrast on Chalk: Iron 16.2, Kinex Blue 11.1, Work Blue 5.9,
     Kinex Orange 3.5 (so orange is never text and never a ground for text). */
  --kx-blue:      #12335F;  /* primary: the paths, the panels, the big type   */
  --kx-iron:      #141414;  /* primary: body copy, the one-colour mark        */
  --kx-orange:    #D9541E;  /* accent: the two people, one call to action, the handoff state */
  --kx-work-blue: #2B5C9E;  /* secondary: charts, links, hover in the software */
  --kx-concrete:  #B9B7B0;  /* ground */
  --kx-sand:      #E1D9C4;  /* ground */
  --kx-chalk:     #F3F0E9;  /* ground: the white */

  /* The three families. Each one has one job. */
  --kx-display: 'Red Hat Display', sans-serif;  /* h1 and h2: Black 900, lowercase, tracked tight */
  --kx-body:    'DM Sans', sans-serif;          /* h3, body, captions, the interface: 400 and 500 */
  --kx-mono:    'JetBrains Mono', monospace;    /* labels, numbers, data: 400 and 500 */

  --kx-display-track: -0.04em;
  --kx-display-lead:  1.05;
  --kx-body-lead:     1.5;
  --kx-mono-track:    0.08em;
  --kx-mono-lead:     1.4;

  /* The smallest width of each logo file on a screen. */
  --kx-logo-min: 120px;  /* the lockup             */
  --kx-mark-min: 24px;   /* the brandmark alone    */
  --kx-word-min: 60px;   /* the wordmark alone     */
  --kx-icon-min: 16px;   /* the app icon, favicon  */

  /* The type tokens of design/adrios.css, pointed at the Kinex families. A
     page that links adrios.css for its layout tokens links this file after
     it. Then every adrios component sets Kinex type, and font-family: var(--ui)
     passes the design hook. The adrios colours do not change: a Kinex surface
     reads its colours from --kx-* only. */
  --ui:    var(--kx-body);
  --serif: var(--kx-body);
  --mono:  var(--kx-mono);
}

/* The page: Chalk ground, Iron text, DM Sans. Put it on <body>. */
.kx-page {
  background: var(--kx-chalk);
  color: var(--kx-iron);
  font-family: var(--kx-body);
  font-weight: 400;
  line-height: var(--kx-body-lead);
  -webkit-font-smoothing: antialiased;
}

/* Reversed: Kinex Blue ground, Chalk text. Use the negative logo files on it. */
.kx-reversed {
  background: var(--kx-blue);
  color: var(--kx-chalk);
}

/* h1 and h2. Red Hat Display Black, always lowercase, tracked tight.
   Short lines, one thought per headline. Write the words in lowercase too. */
.kx-h1,
.kx-h2 {
  font-family: var(--kx-display);
  font-weight: 900;
  letter-spacing: var(--kx-display-track);
  line-height: var(--kx-display-lead);
  text-transform: lowercase;
  color: var(--kx-blue);
}
.kx-reversed .kx-h1,
.kx-reversed .kx-h2 { color: var(--kx-chalk); }

.kx-h1 { font-size: clamp(2.5rem, 9vw, 5.5rem); }
.kx-h2 { font-size: clamp(1.75rem, 5vw, 3rem); }

/* h3 and sub-heads: DM Sans Medium. Never bold. */
.kx-h3 {
  font-family: var(--kx-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Body copy: DM Sans Regular. Light (300) for long reading only. */
.kx-body {
  font-family: var(--kx-body);
  font-weight: 400;
  line-height: var(--kx-body-lead);
}

/* Labels and anything that behaves like data: JetBrains Mono, tracked wide. */
.kx-label {
  font-family: var(--kx-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: var(--kx-mono-track);
  line-height: var(--kx-mono-lead);
  text-transform: uppercase;
}
.kx-num {
  font-family: var(--kx-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* The logo is always a drawn file (<img src=".../logo/kinex-logo-*.svg" alt="Kinex">),
   never typed text. These floors keep each file above its smallest size. */
.kx-logo { display: block; height: auto; min-width: var(--kx-logo-min); }
.kx-mark { display: block; height: auto; min-width: var(--kx-mark-min); }
.kx-word { display: block; height: auto; min-width: var(--kx-word-min); }

/* The one primary control: Kinex Blue with Chalk text. Orange never carries text. */
.kx-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--kx-blue);
  color: var(--kx-chalk);
  font-family: var(--kx-body);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
}
.kx-button:hover { background: var(--kx-work-blue); }
.kx-button:focus-visible { outline: 2px solid var(--kx-iron); outline-offset: 2px; }

/* A link inside the software. The block padding makes the tap target 24 px
   tall, and it does not move the line. */
.kx-link { color: var(--kx-work-blue); padding-block: 2px; }
.kx-link:hover { color: var(--kx-blue); }