/**
 * Glasshead v3 — tokens.
 *
 * Identity: trades signage meets optics. Condensed black type, flat colour
 * fields, hairline rules, hard edges. One signal colour (cobalt, from the logo)
 * on ink and bone. No gradients, no glows, no frosted glass.
 *
 * Colour lives in "tones". A section picks a tone and everything inside reads
 * --bg / --fg / --soft / --muted / --line from it, so components never hard-code.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-wdth.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
}

:root {
  /* primitives (sampled from the logo, then pushed) */
  --ink: #0A0C1A;
  --ink-2: #12162B;
  --ink-3: #1C2140;
  --bone: #EDEAE2;
  --bone-2: #E0DCD0;
  --cobalt: #2F45FF;               /* the signal colour: the logo's own blue, pushed to full saturation */
  --cobalt-light: #7083FF;         /* cobalt for use on ink (5.8:1) */
  --ice: #CDEFF5;
  --blue: #0C84E4;

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4.4vw, 84px);
  --container: 1760px;
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --nav-h: 72px;
  --nav-offset: var(--nav-h); /* what sticky elements clear; 0 while the header is hidden on small screens */
  --sec-y: clamp(88px, 12vw, 200px);

  --ease: cubic-bezier(0.19, 0.8, 0.22, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  --z-ruler: 900;
  --z-header: 1150;
  --z-menu: 1100;
  --z-cursor: 1200;
}

.tone-ink {
  --bg: var(--ink);
  --fg: var(--bone);
  --soft: #C9CBDA;
  --muted: #9296B1;
  --line: rgba(237, 234, 226, 0.2);
  --line-strong: rgba(237, 234, 226, 0.55);
  --accent: var(--cobalt-light);   /* small text and marks on ink */
  --signal: var(--cobalt-light);   /* decorative fills and rules */
  --on-signal: var(--ink);
  --fill: var(--cobalt);           /* hover sweep */
  --on-fill: var(--bone);
  --btn-bg: var(--cobalt);
  --btn-fg: var(--bone);
  --btn-hover-bg: var(--bone);
  --btn-hover-fg: var(--ink);
}
.tone-ink-2 {
  --bg: var(--ink-2);
  --fg: var(--bone);
  --soft: #C9CBDA;
  --muted: #959AB6;
  --line: rgba(237, 234, 226, 0.2);
  --line-strong: rgba(237, 234, 226, 0.55);
  --accent: var(--cobalt-light);
  --signal: var(--cobalt-light);
  --on-signal: var(--ink);
  --fill: var(--cobalt);
  --on-fill: var(--bone);
  --btn-bg: var(--cobalt);
  --btn-fg: var(--bone);
  --btn-hover-bg: var(--bone);
  --btn-hover-fg: var(--ink);
}
.tone-bone {
  --bg: var(--bone);
  --fg: var(--ink);
  --soft: #30334A;
  --muted: #565A70;
  --line: rgba(10, 12, 26, 0.2);
  --line-strong: rgba(10, 12, 26, 0.65);
  --accent: var(--cobalt);         /* 5.1:1 on bone */
  --signal: var(--cobalt);
  --on-signal: var(--bone);
  --fill: var(--cobalt);
  --on-fill: var(--bone);
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  --btn-hover-bg: var(--cobalt);
  --btn-hover-fg: var(--bone);
}
.tone-cobalt {
  --bg: var(--cobalt);
  --fg: var(--bone);
  --soft: #E2E6FF;
  --muted: #D2D8FF;
  --line: rgba(237, 234, 226, 0.4);
  --line-strong: rgba(237, 234, 226, 0.85);
  --accent: var(--bone);
  --signal: var(--bone);
  --on-signal: var(--cobalt);
  --fill: var(--bone);
  --on-fill: var(--ink);
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  --btn-hover-bg: var(--ink);
  --btn-hover-fg: var(--bone);
}