/* RWS — Rusty Wage Slaves design tokens */
:root {
  /* Olive drab palette */
  --od-900: #14160f;    /* near-black, warm */
  --od-800: #1c2016;
  --od-700: #272c1f;
  --od-600: #373d28;
  --od-500: #4a5231;
  --od-400: #6b7542;
  --od-300: #8a9458;
  --od-200: #b6bf87;
  --od-100: #dde1bd;

  /* Canvas / paper */
  --paper: #e8e2cf;
  --paper-dim: #cdc6ae;
  --stencil: #c9c2a3;

  /* Accent */
  --blood: #b33030;
  --blood-dim: #7a2020;
  --blood-hot: #d94040;
  --rust: #a85a2a;
  --amber: #d4a017;

  /* Semantic */
  --ok: #7a8a3d;
  --warn: #d4a017;
  --bad: #b33030;

  /* Type */
  --f-stencil: "Oswald", "Stencil Std", "Impact", sans-serif;
  --f-display: "Oswald", "Bebas Neue", "Impact", sans-serif;
  --f-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-body: "Inter", -apple-system, system-ui, sans-serif;

  --radius: 2px;
  --radius-lg: 4px;
}

* { box-sizing: border-box; }

.rws {
  font-family: var(--f-body);
  color: var(--od-100);
  background: var(--od-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rws h1, .rws h2, .rws h3, .rws h4, .stencil {
  font-family: var(--f-stencil);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}

.mono { font-family: var(--f-mono); }
.small-caps { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }

/* Reusable textures */
.tx-canvas {
  background-color: var(--od-900);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(107,117,66,0.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px);
}

.tx-grain {
  position: relative;
}
.tx-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.35 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Stencil border — dashed w/ endcaps */
.stencil-frame {
  border: 1px solid var(--od-500);
  background:
    linear-gradient(var(--od-800), var(--od-800)) padding-box,
    repeating-linear-gradient(45deg, var(--od-500) 0 8px, transparent 8px 16px) border-box;
}

/* Tape strips */
.tape {
  background: rgba(212,160,23,0.85);
  color: var(--od-900);
  padding: 3px 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Button */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-stencil);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--od-400);
  background: var(--od-700);
  color: var(--paper);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.15s ease;
  text-decoration: none;
}
.btn:hover { background: var(--od-600); border-color: var(--od-300); }
.btn.primary { background: var(--blood); border-color: var(--blood-hot); color: #fff; }
.btn.primary:hover { background: var(--blood-hot); }
.btn.ghost { background: transparent; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--od-500);
  background: rgba(39,44,31,0.6);
  color: var(--od-200);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}
.pill.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok);
  animation: pulse 1.5s infinite;
}
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.bad { color: var(--blood-hot); border-color: var(--blood); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Card */
.card {
  background: linear-gradient(180deg, var(--od-800), var(--od-900));
  border: 1px solid var(--od-600);
  border-radius: var(--radius);
  position: relative;
}

/* Notched corners — tactical look */
.notch {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* Dog tag */
.dog-tag {
  position: relative;
  padding: 16px 20px;
  background: linear-gradient(180deg, #3a4028, #2a2f1c);
  border: 1px solid var(--od-500);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.5);
}
.dog-tag::before {
  content: ""; position: absolute; top: -6px; left: 20px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--od-700); border: 1px solid var(--od-500);
}

/* Divider — stencil style */
.hr-stencil {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--od-500) 0 12px, transparent 12px 20px);
  border: 0;
}

/* Scrollbar inside artboards */
.art-scroll { overflow-y: auto; }
.art-scroll::-webkit-scrollbar { width: 6px; }
.art-scroll::-webkit-scrollbar-track { background: var(--od-900); }
.art-scroll::-webkit-scrollbar-thumb { background: var(--od-600); }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12px; }
.data-table th {
  text-align: left; padding: 8px 12px;
  color: var(--od-300);
  font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px;
  border-bottom: 1px solid var(--od-600);
  background: var(--od-800);
}
.data-table td {
  padding: 12px; border-bottom: 1px solid var(--od-700);
  color: var(--od-100);
}
.data-table tbody tr:hover { background: rgba(107,117,66,0.08); }

/* Stamped text — like ink stamp */
.stamp {
  display: inline-block;
  padding: 6px 14px;
  border: 2px solid var(--blood);
  color: var(--blood-hot);
  font-family: var(--f-stencil);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  opacity: 0.88;
  background: rgba(179,48,48,0.05);
}