/* Clearance — shared design tokens
   Prototype. No brand assets, no third-party fonts (works offline / file://). */

:root {
  --ink:        #10161d;
  --ink-2:      #2c3742;
  --muted:      #5f6b78;
  --muted-2:    #8b96a2;
  --line:       #e3e7ec;
  --line-2:     #eef1f4;
  --bg:         #ffffff;
  --bg-alt:     #f6f8fa;
  --bg-sunk:    #eef1f5;

  --primary:    #1c5b86;
  --primary-2:  #14476a;
  --primary-bg: #e8f1f8;

  --risk:       #b3261e;
  --risk-bg:    #fdecea;
  --warn:       #9a6206;
  --warn-bg:    #fdf3e0;
  --ok:         #17673f;
  --ok-bg:      #e7f4ec;
  --info:       #4a5561;
  --info-bg:    #eef1f4;

  --hazard-a:   #e8a33d;
  --hazard-b:   #1c232b;

  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 1px 2px rgba(16,22,29,.06), 0 4px 14px rgba(16,22,29,.05);
  --shadow-lg:  0 2px 6px rgba(16,22,29,.08), 0 18px 40px rgba(16,22,29,.10);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8edf2;
    --ink-2:      #c3ccd6;
    --muted:      #9aa5b1;
    --muted-2:    #77828e;
    --line:       #263039;
    --line-2:     #1d252d;
    --bg:         #0e1319;
    --bg-alt:     #141b22;
    --bg-sunk:    #0a0e13;

    --primary:    #6bb2e0;
    --primary-2:  #93c9ec;
    --primary-bg: #12293b;

    --risk:       #f2857c;
    --risk-bg:    #331614;
    --warn:       #e5ab52;
    --warn-bg:    #322512;
    --ok:         #63c894;
    --ok-bg:      #10281c;
    --info:       #a9b4bf;
    --info-bg:    #1a222a;

    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lg:  0 2px 6px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.18; margin: 0; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--primary); }

.hazard-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hazard-a) 0 14px,
    var(--hazard-b) 14px 28px
  );
}

.mono { font-family: var(--mono); font-size: .86em; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}
.badge.risk { background: var(--risk-bg); color: var(--risk); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.assumption { background: var(--warn-bg); color: var(--warn); text-transform: none; letter-spacing: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  font: inherit; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-danger { background: var(--risk); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #06131c; }
  .btn-danger  { color: #260906; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}