{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "name": "Haksec Group / Pixel Signal",
  "version": "1.0.0",
  "updated": "2026-08-21",
  "source": "resources/css/app.css (hex fallbacks are canonical; oklch upgrades applied via @supports)",
  "color": {
    "ui": {
      "void": { "value": "#131019", "oklch": "oklch(15% 0.025 305)", "role": "Page background. The near-black with a violet cast every surface sits on." },
      "surface-1": { "value": "#1a1622", "oklch": "oklch(18.5% 0.03 305)", "role": "First raised surface (panels, footer)." },
      "surface-2": { "value": "#221c2d", "oklch": "oklch(22% 0.035 305)", "role": "Second raised surface." },
      "surface-3": { "value": "#2b2438", "oklch": "oklch(26% 0.04 305)", "role": "Third raised surface, scrollbar thumb." },
      "line": { "value": "rgba(122, 106, 148, 0.28)", "oklch": "oklch(45% 0.05 305 / 0.35)", "role": "Hairline borders, background grid." },
      "line-strong": { "value": "rgba(146, 128, 176, 0.45)", "oklch": "oklch(55% 0.06 305 / 0.5)", "role": "Emphasised borders, input borders." },
      "text": { "value": "#efeaf5", "oklch": "oklch(94.5% 0.012 320)", "role": "Primary text." },
      "text-mute": { "value": "#b2a8c2", "oklch": "oklch(75% 0.03 310)", "role": "Secondary text, body copy." },
      "text-dim": { "value": "#837792", "oklch": "oklch(60% 0.035 308)", "role": "Tertiary text, labels, metadata." },
      "accent": { "value": "#f0409c", "oklch": "oklch(66% 0.235 355)", "role": "Primary brand accent: hot magenta. CTAs, selection, focus rings, HackerContent." },
      "accent-hi": { "value": "#ff7dbd", "oklch": "oklch(76% 0.17 355)", "role": "Accent for text on dark; hover states." },
      "accent-deep": { "value": "#8f1f5c", "oklch": "oklch(45% 0.18 355)", "role": "Accent shadow (hard offset under primary buttons)." },
      "signal": { "value": "#62b7f0", "oklch": "oklch(74% 0.115 240)", "role": "Signal blue. Status, success, Ironbark Cyber. Used sparingly." },
      "signal-hi": { "value": "#9bd2fa", "oklch": "oklch(84% 0.08 240)", "role": "Signal blue for text on dark." },
      "violet": { "value": "#9d6bde", "oklch": "oklch(62% 0.16 300)", "role": "Violet mid-tone. Depth, gradients, TRIAGERS." },
      "violet-hi": { "value": "#bfa0ec", "oklch": "oklch(75% 0.11 300)", "role": "Violet for text on dark." },
      "danger": { "value": "#ff7a7a", "oklch": "oklch(72% 0.16 25)", "role": "Errors and validation messages only." }
    },
    "logo": {
      "note": "Fixed palette of the pixel-art logo and derived icons. Do not substitute UI colours into the logo or vice versa.",
      "outline-deep": { "value": "#0c0b12" },
      "outline": { "value": "#1d1e2a" },
      "outline-soft": { "value": "#43475d" },
      "laptop-shade": { "value": "#7b899f" },
      "laptop": { "value": "#95a5b6" },
      "laptop-light": { "value": "#c4d2da" },
      "white": { "value": "#ffffff" },
      "magenta": { "value": "#ff53cb" },
      "pink-light": { "value": "#ffbafc" },
      "purple": { "value": "#9131a0" },
      "purple-deep": { "value": "#4f1f64" },
      "blue": { "value": "#49afde" },
      "blue-deep": { "value": "#266cb4" }
    }
  },
  "font": {
    "display": {
      "family": "Archivo",
      "fallbacks": ["Helvetica Neue", "Arial", "sans-serif"],
      "type": "variable",
      "axes": { "wght": "100–900", "wdth": "62%–125%" },
      "file": "resources/fonts/archivo-var.woff2",
      "licence": "SIL Open Font License 1.1 (Google Fonts: Archivo)",
      "roles": "Display and body. Headings set 820–860 weight at width 116–118, uppercase, tight tracking; body at 400–500, normal width."
    },
    "mono": {
      "family": "JetBrains Mono",
      "fallbacks": ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
      "type": "variable",
      "axes": { "wght": "100–800" },
      "file": "resources/fonts/jetbrains-mono-var.woff2",
      "licence": "SIL Open Font License 1.1 (JetBrains Mono)",
      "roles": "Labels, eyebrows, buttons, nav, terminal chrome, code. Tabular numerals for indices."
    }
  },
  "typescale": {
    "display": { "value": "clamp(2.5rem, 7.5vw, 5.4rem)", "lineHeight": 0.98, "tracking": "-0.035em", "weight": 860, "width": 118, "transform": "uppercase" },
    "section-title": { "value": "clamp(1.9rem, 4vw, 3rem)", "lineHeight": 1.05, "tracking": "-0.025em", "weight": 830, "width": 118, "transform": "uppercase" },
    "lede": { "value": "clamp(1.02rem, 1.4vw, 1.18rem)", "lineHeight": 1.7 },
    "body": { "value": "1rem", "lineHeight": 1.65 },
    "small": { "value": "0.9rem" },
    "caption": { "value": "0.78rem" },
    "eyebrow": { "value": "0.72rem", "font": "mono", "tracking": "0.28em", "transform": "uppercase" },
    "button": { "value": "0.85rem", "font": "mono", "weight": 600, "tracking": "0.04em", "transform": "uppercase" }
  },
  "space": {
    "px": { "value": "0.5rem", "role": "The atomic pixel unit. Offsets, hard shadows, pixel decorations are multiples of it." },
    "shell-max": { "value": "74rem", "wide": "82rem (≥100rem viewports)" },
    "shell-pad": { "value": "clamp(1.25rem, 4vw, 2.5rem)" },
    "section-block": { "value": "clamp(4rem, 9vh, 6.5rem)" }
  },
  "radius": {
    "all": { "value": "0", "role": "No rounded corners anywhere. The brand is built from square pixels." }
  },
  "shadow": {
    "btn-solid": { "value": "0.5rem 0.5rem 0 0 var(--accent-deep)", "role": "Hard pixel offset under primary buttons; collapses to 0 on :active." },
    "input-focus": { "value": "0.5rem 0.5rem 0 0 color-mix(in srgb, var(--accent) 35%, transparent)" },
    "note": "No blurred drop shadows. Depth comes from hard offsets and surface steps."
  },
  "motion": {
    "step-ease": { "value": "steps(6, end)", "role": "Quantised easing. Nothing glides; things step." },
    "snap": { "value": "150ms steps(3, end)", "role": "Micro-interactions (hover, colour, transform)." }
  }
}