/* ================================================================
   LastControl / LostControl — production CSS tokens & primitives.
   Drop into any new site. Import "Archivo Black" + "JetBrains Mono"
   from Google Fonts before using.
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* shared */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 2px 3px 0 rgba(20,22,26,0.3);
  --shadow-card-lg: 3px 4px 0 rgba(20,22,26,0.4);

  /* type */
  --f-display: "Archivo Black", Impact, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ---- LAST CONTROL theme ---- */
[data-brand="last"], .theme-last {
  --ink:      #14161A;
  --shadow:   #3A3630;
  --ceramic:  #EAE3D5;
  --sodium:   #E9B25C;
  --crack:    #A6382A;
  --bg-light: #EFE8D9;
  --bg-dark:  #0F1114;

  --fg: var(--ink);
  --bg: var(--bg-light);
  --accent: var(--sodium);
  --accent-ink: var(--ink);
}

/* ---- LOST CONTROL theme ---- */
[data-brand="lost"], .theme-lost {
  --oil:       #0A0A0C;
  --steel:     #363033;
  --rust:      #7A3B2A;
  --wire:      #B97A2E;
  --emergency: #D6261C;
  --hazard:    #E6B11B;
  --bg-light:  #E4DAC5;
  --bg-dark:   #0A0806;

  --fg: #E4DAC5;
  --bg: var(--bg-dark);
  --accent: var(--emergency);
  --accent-ink: var(--oil);
}

/* ---- base ---- */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-mono);
  -webkit-font-smoothing: antialiased;
}

/* ---- type primitives ---- */
.display,
h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.eyebrow,
.mono-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono-meta {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---- CTA buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 18px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-card); }
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

/* ---- wordmark helpers ---- */
.wordmark {
  font-family: var(--f-display);
  line-height: 0.9;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.wordmark .fragile-a,
.wordmark .hazard-o {
  display: inline-block;
  vertical-align: baseline;
}
.wordmark .fragile-a { width: 0.82em; height: 1em; margin: 0 0.03em; }
.wordmark .hazard-o  { width: 0.92em; height: 0.88em; margin: 0 0.02em; transform: translateY(0.05em); }
.wordmark .fragile-a svg,
.wordmark .hazard-o  svg { width: 100%; height: 100%; overflow: visible; }

/* ---- hazard-stripe surfaces ---- */
.hazard-stripes {
  background-image: repeating-linear-gradient(
    45deg,
    #0A0A0C 0 8px,
    #E6B11B 8px 16px
  );
}