/* =============================================================
   OT/TC — Operator Tactics & Terra Conflictus Design System
   colors_and_type.css
   ------------------------------------------------------------
   Two-layer system:
     · SYSTEM layer  → TDR logic (cold, exact, engineered)
     · HUMAN  layer  → Shibuya Punk (hot, worn, self-authored)
   ============================================================= */

/* ---------- Font stacks (Google substitutes flagged in README) ---------- */
/* System type: IBM Plex Sans Condensed (FF DIN substitute)
   Mono:        IBM Plex Mono           (Letter Gothic substitute)
   Human type:  Archivo Narrow          (Trade Gothic Next substitute)
   JP system:   Noto Sans JP
   Default Gothic faction tagline: Space Grotesk (closest available)   */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&family=Archivo+Narrow:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
  /* ---------- Base palette ---------- */
  --color-ground:         #0D0D0B;   /* warm near-black, primary ground */
  --color-ground-cool:    #0A0C10;   /* cool charcoal alt */
  --color-concrete:       #2B2E35;   /* mid-dark slate */
  --color-asphalt:        #1C1F24;   /* slightly lighter dark surface */
  --color-text-primary:   #E8E4DC;   /* warm near-white */
  --color-text-secondary: #8A8A80;   /* muted warm gray */
  --color-rule:           #3A3A36;   /* dividers, hairlines */

  /* ---------- System accents (TDR / system layer only) ---------- */
  --color-signal:         #D4C84A;   /* acid yellow */
  --color-signal-alt:     #4A8FBF;   /* cold blue */
  --color-warning:        #9B3A2C;   /* threat / hostile */

  /* ---------- Human accents (Shibuya Punk / human layer only) ---------- */
  --color-human-hot:      #E8255A;   /* hot pink/red */
  --color-human-warm:     #8C6130;   /* burnt amber-ochre / PMC brass */
  --color-human-electric: #2BAAFF;   /* electric blue */

  /* ---------- Semantic ---------- */
  --fg-1: var(--color-text-primary);
  --fg-2: var(--color-text-secondary);
  --bg-1: var(--color-ground);
  --bg-2: var(--color-asphalt);
  --bg-3: var(--color-concrete);
  --rule: var(--color-rule);

  /* Default palette treaty: acid yellow (system) + hot pink (human) */
  --accent-system: var(--color-signal);
  --accent-human:  var(--color-human-hot);

  /* ---------- Type stacks ---------- */
  --font-system:      "IBM Plex Sans Condensed", "FF DIN", "DIN Next", Helvetica, Arial, sans-serif;
  --font-mono:        "IBM Plex Mono", "Letter Gothic", "Courier New", monospace;
  --font-human:       "Archivo Narrow", "Trade Gothic Next Condensed", "League Gothic", Impact, sans-serif;
  --font-human-alt:   "Space Grotesk", "Default Gothic", sans-serif;
  --font-jp:          "Noto Sans JP", "Heisei Kaku Gothic", sans-serif;

  /* ---------- Type scale (px, fixed — no fluid) ---------- */
  --t-micro:   10px;
  --t-meta:    12px;
  --t-body:    14px;
  --t-body-lg: 16px;
  --t-h4:      20px;
  --t-h3:      28px;
  --t-h2:      40px;
  --t-h1:      64px;
  --t-display: 112px;

  /* Tracking */
  --track-tight:   -0.01em;
  --track-normal:   0em;
  --track-wide:     0.08em;
  --track-wider:    0.15em;
  --track-faction:  0.20em;

  /* Line-height */
  --lh-tight:  1.0;
  --lh-snug:   1.12;
  --lh-body:   1.45;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Borders — hard edges only, no radius ---------- */
  --radius: 0;
  --hair:   1px solid var(--rule);
  --hair-signal:  1px solid var(--color-signal);
  --hair-warning: 1px solid var(--color-warning);
  --rule-heavy:   2px solid var(--color-text-primary);

  /* ---------- Motion (system) ---------- */
  --dur-fast: 120ms;
  --dur-mid:  160ms;
  --dur-slow: 180ms;
  --ease:     cubic-bezier(0, 0, 0.2, 1); /* ease-out */
  --ease-linear: linear;
  --stagger:  40ms;

  /* Shadows — sparse; system UI is flat. Used only for human posters. */
  --shadow-poster: 4px 4px 0 rgba(0,0,0,0.85);
}

/* ---------- Element defaults ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-system);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* System type roles */
.sys-h1, h1 {
  font-family: var(--font-system);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0;
}
.sys-h2, h2 {
  font-family: var(--font-system);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0;
}
.sys-h3, h3 {
  font-family: var(--font-system);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0;
}
.sys-label {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: var(--t-meta);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}
.sys-body, p {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

/* Faction marks: condensed, wide-tracked, all-caps */
.faction {
  font-family: var(--font-system);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: var(--track-faction);
}

/* Mono / coords / serials */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-normal);
  text-transform: uppercase;
}

/* Human poster type */
.human-display {
  font-family: var(--font-human);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.human-headline {
  font-family: var(--font-human);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.human-tag {
  font-family: var(--font-human-alt);
  font-weight: 500;
  font-size: var(--t-body);
  letter-spacing: var(--track-normal);
}

/* Japanese */
.jp { font-family: var(--font-jp); font-weight: 500; }

/* Utility: hard hairline divider */
.hr {
  border: 0;
  border-top: var(--hair);
  height: 0;
}

/* Utility: crop/registration marks */
.crop::before,
.crop::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--fg-1);
}
.crop::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.crop::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }