/* ============================================================
   SUPPLY DIVERSIFICATION PARTNERS — Industrial design system
   ============================================================ */

:root {
  /* Neutrals — warm concrete + steel ink */
  --concrete:    #E6E2DA;
  --concrete-2:  #EEEAE2;
  --paper:       #F6F3EC;
  --ink:         #17191C;
  --steel-900:   #23262B;
  --steel-700:   #3B3F45;
  --steel-500:   #6B6F75;
  --steel-600:   #595D63;
  --steel-400:   #8A8E93;
  --steel-300:   #ADB0B4;
  --steel-200:   #CBCDCF;
  --line:        #17191C;
  --line-soft:   rgba(23,25,28,0.16);

  /* Brand / action — safety orange */
  --orange:      #DC5B27;
  --orange-dk:   #B8451A;
  --orange-tint: #F4E3D6;

  /* Semantic — traffic light (risk + scenarios) */
  --red:    #BE3A2B;
  --red-dk: #8F271B;
  --amber:  #D38B1E;
  --amber-dk:#A1660E;
  --green:  #2C7A56;
  --green-dk:#1C5C3E;

  /* Data-neutral accent */
  --teal:   #1C6B6E;

  --r:      2px;
  --bw:     1.5px;
  --shadow: 4px 4px 0 rgba(23,25,28,0.12);

  --maxw:   1240px;

  --ff-disp: "Archivo", "Arial Narrow", sans-serif;
  --ff-body: "Archivo", system-ui, sans-serif;
  --ff-mono: "Space Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-body);
  background: var(--concrete);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ff-disp);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

/* ---- Mono overline / technical label ---- */
.overline {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.overline-ink { color: var(--ink); }
.overline-orange { color: var(--orange-dk); }

.mono { font-family: var(--ff-mono); }

/* ---- Layout helpers ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.sect { padding: 96px 0; }

/* ---- Hard-edge panel ---- */
.panel {
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
}
.panel-sh { box-shadow: var(--shadow); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-orange { background: var(--orange); color: #fff; border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { box-shadow: none; background: transparent; }
.btn-ghost:hover { box-shadow: none; background: rgba(23,25,28,0.05); transform: none; }

/* ---- Hazard stripe ---- */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--orange) 0, var(--orange) 14px,
    var(--ink) 14px, var(--ink) 28px
  );
}
.hazard-thin {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ink) 0, var(--ink) 8px,
    transparent 8px, transparent 16px
  );
}

/* ---- Tag / chip ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
}
.tag-red   { background: var(--red);   color:#fff; border-color: var(--red-dk); }
.tag-amber { background: var(--amber); color: var(--ink); border-color: var(--amber-dk); }
.tag-green { background: var(--green); color:#fff; border-color: var(--green-dk); }
.tag-orange{ background: var(--orange);color:#fff; border-color: var(--orange-dk); }

/* ---- Rule with mono caption ---- */
.rule {
  display:flex; align-items:center; gap:14px;
  font-family: var(--ff-mono); font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--steel-500);
}
.rule::after { content:""; flex:1; height:1.5px; background: var(--line-soft); }

::selection { background: var(--orange); color:#fff; }