@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {

  --hac-ink:          #0A0A0A;
  --hac-ink-soft:     #1A1A1A;
  --hac-paper:        #FFFFFF;
  --hac-paper-warm:   #FAFAF7;

  --hac-yellow:       #F5C518;
  --hac-yellow-deep:  #E0A800;
  --hac-yellow-soft:  #FFEB9C;

  --hac-teal:         #1FB8A8;
  --hac-teal-deep:    #0E7F74;
  --hac-teal-soft:    #B8E8E1;

  --hac-blue:         #1E6FD9;
  --hac-blue-deep:    #0B3D8C;
  --hac-blue-midnight:#061A3A;
  --hac-blue-soft:    #D6E4FA;

  --hac-n-00: #FFFFFF;
  --hac-n-05: #F6F6F4;
  --hac-n-10: #EDEDEA;
  --hac-n-20: #D9D9D4;
  --hac-n-30: #BDBDB6;
  --hac-n-40: #8E8E87;
  --hac-n-50: #5E5E58;
  --hac-n-60: #3D3D39;
  --hac-n-70: #242422;
  --hac-n-80: #141413;
  --hac-n-90: #0A0A0A;

  --fg-1:        var(--hac-ink);
  --fg-2:        var(--hac-n-60);
  --fg-3:        var(--hac-n-40);
  --fg-muted:    var(--hac-n-30);
  --fg-on-dark:  var(--hac-paper);
  --fg-inverse:  var(--hac-paper);

  --bg-1:        var(--hac-paper);
  --bg-2:        var(--hac-n-05);
  --bg-3:        var(--hac-n-10);
  --bg-inverse:  var(--hac-ink);

  --status-ok:       var(--hac-teal);
  --status-signal:   var(--hac-yellow);
  --status-info:     var(--hac-blue);
  --status-warn:     #E8892B;
  --status-alert:    #CC3B3B;
  --status-offline:  var(--hac-n-40);

  --rule-1: var(--hac-ink);
  --rule-2: var(--hac-n-30);
  --rule-3: var(--hac-n-10);
  --rule-yellow: var(--hac-yellow);

  --grid-plus: var(--hac-n-30);
  --grid-bg:   var(--hac-paper);

  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-full: 9999px;

  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--hac-n-20);
  --shadow-2: 0 2px 0 0 var(--hac-ink);
  --shadow-3: 0 6px 24px -12px rgba(6, 26, 58, 0.35);

  --font-display: 'Barlow Condensed', 'Oswald', 'Impact', 'Arial Narrow Bold', sans-serif;
  --font-body:    'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

  --t-display-xl: 700 96px/0.92 var(--font-display);
  --t-display-l:  700 72px/0.95 var(--font-display);
  --t-display-m:  700 56px/1.00 var(--font-display);
  --t-h1:         700 40px/1.05 var(--font-display);
  --t-h2:         700 28px/1.10 var(--font-display);
  --t-h3:         700 20px/1.20 var(--font-display);

  --t-eyebrow:    600 12px/1.20 var(--font-display);
  --t-label:      600 11px/1.20 var(--font-mono);

  --t-body-l:     400 18px/1.55 var(--font-body);
  --t-body:       400 15px/1.55 var(--font-body);
  --t-body-s:     400 13px/1.50 var(--font-body);
  --t-meta:       400 11px/1.40 var(--font-body);

  --t-mono:       500 13px/1.45 var(--font-mono);
  --t-mono-s:     500 11px/1.40 var(--font-mono);

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-loose:   0.04em;
  --ls-caps:    0.08em;
  --ls-tag:     0.14em;
}

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--t-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1);        letter-spacing: var(--ls-tight); text-transform: uppercase; margin: 0; }
h2 { font: var(--t-h2);        letter-spacing: var(--ls-caps);  text-transform: uppercase; margin: 0; }
h3 { font: var(--t-h3);        letter-spacing: var(--ls-caps);  text-transform: uppercase; margin: 0; }

.display-xl { font: var(--t-display-xl); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.display-l  { font: var(--t-display-l);  letter-spacing: var(--ls-tight); text-transform: uppercase; }
.display-m  { font: var(--t-display-m);  letter-spacing: var(--ls-tight); text-transform: uppercase; }

.eyebrow { font: var(--t-eyebrow); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--fg-2); }
.label   { font: var(--t-label);   letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--fg-2); }

p { font: var(--t-body); margin: 0 0 1em 0; max-width: 62ch; text-wrap: pretty; }
.lead { font: var(--t-body-l); color: var(--fg-1); }
.meta { font: var(--t-meta);   color: var(--fg-3); }

code, kbd, pre { font: var(--t-mono); color: var(--fg-1); }
pre {
  background: var(--bg-3);
  padding: var(--s-4);
  border: 1px solid var(--rule-3);
  overflow-x: auto;
}

.hac-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--hac-ink);
  color: var(--fg-on-dark);
  padding: 6px 12px;
  font: var(--t-h3);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
}

.hac-grid-bg {
  background-color: var(--grid-bg);
  background-image:
    linear-gradient(var(--grid-plus) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-plus) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -0.5px -0.5px;

  background-image:
    radial-gradient(circle at 12px 12px, var(--grid-plus) 0.6px, transparent 1.2px),
    linear-gradient(var(--grid-plus) 0.6px, transparent 0.6px),
    linear-gradient(90deg, var(--grid-plus) 0.6px, transparent 0.6px);
  background-size: 24px 24px, 24px 2px, 2px 24px;
  background-position: 0 0, 0 11.7px, 11.7px 0;
  opacity: 1;
}

a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--hac-yellow); }

::selection { background: var(--hac-yellow); color: var(--hac-ink); }