/* TUEPAC shared design tokens.
   Loaded by every prototype HTML so the visual language stays in sync.
   Override per-app in a <style> block after this file is loaded. */

:root{
  /* base palette */
  --black:#0B0B0C;
  --ink:#161616;
  --ink-2:#2a2a2a;
  --mute:#5b5b5b;
  --mute-2:#8a8a8a;
  --rule:#1c1c1d;
  --rule-soft:rgba(11,11,12,.14);
  --rule-line:#e7e6e3;
  --bg:#FFFFFF;
  --canvas:#F6F6F4;
  --ivory:#F8F3E7;
  --paper:#F8F8F6;
  --surface:#FAFAF8;

  /* role colors */
  --red:#C1121F;
  --green:#0B5D3B;
  --green-2:#0d8b4d;
  --navy:#12355B;
  --navy-2:#1d4a7c;
  --gold:#D6A13A;
  --gold-2:#B98620;
  --sky:#D8E6F2;
  --sky-2:#EAF1F8;
  --sky-3:#F5F8FB;

  /* typography */
  --serif:'Bodoni Moda', 'Times New Roman', serif;
  --serif-text:'IBM Plex Serif', Georgia, serif;
  --sans:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}

/* reset basics */
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}

/* utility classes used across apps */
.serif{font-family:var(--serif)}
.serif-text{font-family:var(--serif-text)}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.eyebrow.k{color:var(--black)}

.hr{height:1px;background:var(--rule-soft);border:0}
.hr-line{height:1px;background:var(--rule-line);border:0}
.hr-k{height:1px;background:var(--black);border:0}
.hr-dbl{height:4px;border-top:1px solid var(--black);border-bottom:1px solid var(--black);background:transparent}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:1px;line-height:1.5;border:1px solid transparent}
.pill .d{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor}
.pill.live{background:rgba(11,93,59,.08);color:var(--green);border-color:rgba(11,93,59,.22)}
.pill.go{background:rgba(11,93,59,.08);color:var(--green);border-color:rgba(11,93,59,.22)}
.pill.warn{background:rgba(214,161,58,.12);color:var(--gold-2);border-color:rgba(185,134,32,.32)}
.pill.bad{background:rgba(193,18,31,.06);color:var(--red);border-color:rgba(193,18,31,.22)}
.pill.info{background:rgba(31,46,79,.06);color:var(--navy);border-color:rgba(31,46,79,.18)}
.pill.muted{background:var(--paper);color:var(--mute);border-color:var(--rule-line)}
.pill.k{background:var(--black);color:var(--ivory);border-color:var(--black)}
.pill.g{background:var(--gold);color:var(--black);border-color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--black);background:transparent;color:var(--ink);cursor:default;font-weight:500;text-align:center;justify-content:center}
.btn.k{background:var(--black);color:var(--ivory)}
.btn.g{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:700}
.btn.n{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.btn.gr{background:var(--green);color:var(--ivory);border-color:var(--green)}
.btn.r{background:var(--red);color:var(--ivory);border-color:var(--red)}
.btn.s{padding:5px 10px;font-size:9.5px}
.btn.lg{padding:12px 22px;font-size:11.5px;letter-spacing:.16em;font-weight:700}
.btn.gh{background:transparent;border:1px solid var(--rule-line);color:var(--ink)}
.btn.blk{background:var(--black);color:var(--ivory)}

/* form fields */
.field{display:flex;flex-direction:column;gap:5px}
.field label, .field .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:500}
.field input, .field select, .field textarea{padding:10px 12px;background:var(--bg);border:1px solid var(--rule-line);font-size:13.5px;outline:none;color:var(--ink)}
.field input:focus, .field textarea:focus{border-color:var(--black)}
.field .hint{font-family:var(--mono);font-size:9.5px;color:var(--mute);letter-spacing:.06em}
.field .err{font-family:var(--mono);font-size:9.5px;color:var(--red);letter-spacing:.06em;font-weight:600}

/* status dot */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.green{background:var(--green-2);box-shadow:0 0 0 2px rgba(13,139,77,.18)}
.dot.gold{background:var(--gold)}
.dot.red{background:var(--red);box-shadow:0 0 0 2px rgba(193,18,31,.18)}

/* card */
.card{background:var(--bg);border:1px solid var(--rule-line)}
.card .hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rule-line)}
.card .hd h3{margin:0;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:-.005em}
.card .hd .meta{font-family:var(--mono);font-size:9.5px;color:var(--mute);letter-spacing:.1em}
.card .bd{padding:12px 14px}

/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--mute);font-weight:500;text-transform:uppercase;text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-line);background:var(--canvas)}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--rule-line);vertical-align:middle}
table.tbl tr:hover td{background:var(--canvas)}
table.tbl .r{text-align:right}
table.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* progress */
.prog{height:5px;background:var(--rule-line)}
.prog .fill{height:100%;background:var(--green)}
.prog .fill.gold{background:var(--gold)}
.prog .fill.red{background:var(--red)}
.prog .fill.navy{background:var(--navy)}