/* Proof — design tokens (direction 01, Instrument)
   Drop this in and style against the variables. Don't hardcode hex anywhere else. */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=Inter:wght@400;500&display=swap');

:root {
  /* Typeface roles ------------------------------------------------------ */
  --font-display: 'Raleway', system-ui, sans-serif;       /* wordmark + headings (bold, tight) */
  --font-ui:      'Raleway', system-ui, sans-serif;        /* body + labels */
  --font-data:    'Inter', system-ui, sans-serif;          /* numbers only — kept for tabular figures (Raleway's aren't) */
  --font-nav:     'Raleway', system-ui, sans-serif;        /* sidebar nav */

  /* Brand neutrals ------------------------------------------------------ */
  --ink:    #141414;  /* primary text, wordmark */
  --paper:  #F7F6F2;  /* app background (warm off-white) */
  --surface:#FFFFFF;  /* cards */
  --slate:  #5F5E5A;  /* secondary text */
  --border: #E3DED4;  /* warm hairline border */

  /* Brand accent -------------------------------------------------------- */
  --teal:      #0F6E56; /* brand + PASS */
  --teal-fill: #E1F5EE;

  /* Verdict states ------------------------------------------------------ */
  --amber:      #BA7517; /* WATCH / investigate */
  --amber-fill: #FAEEDA;
  --red:        #A32D2D; /* REJECT */
  --red-fill:   #FCEBEB;

  /* Type scale (app UI) ------------------------------------------------- */
  --t-title:   700 25px/1.25 var(--font-display); /* page title — bold */
  --t-section: 700 19px/1.3  var(--font-display); /* section heading — bold */
  --t-body:    400 14px/1.6  var(--font-ui);      /* body / UI — normal */
  --t-label:   600 12px/1.4  var(--font-ui);      /* uppercase labels — semibold */
  --t-data:    500 14px/1.4  var(--font-data);    /* indices, minutes, lot numbers */

  /* Shape --------------------------------------------------------------- */
  --radius:    8px;
  --radius-lg: 12px;
}

/* Wordmark ------------------------------------------------------------- */
.proof-wordmark { font: 800 27px/1 var(--font-display); letter-spacing: -.5px; color: var(--paper); }
/* The torque-curve mark sits to its right; keep it teal (--teal / #1D9E75 on dark). */

/* Verdict badge — the only place the "stamp" treatment is allowed ------ */
.verdict { display:inline-block; border:2px solid; border-radius:5px; padding:3px 12px;
           font:700 14px/1 var(--font-display); letter-spacing:.5px; transform:rotate(-3deg); }
.verdict.pass   { color: var(--teal);  border-color: var(--teal);  }
.verdict.watch  { color: var(--amber); border-color: var(--amber); }
.verdict.reject { color: var(--red);   border-color: var(--red);   }

/* Usage rules ---------------------------------------------------------- */
/* 1. Numbers are always --font-data so columns of indices line up.       */
/* 2. Teal = brand and pass. Don't use red or amber as decoration.        */
/* 3. Ink on paper is the default. Reverse to paper-on-ink only in the    */
/*    top header bar.                                                      */
/* 4. The stamp rotation is reserved for verdict badges. Nothing else      */
/*    tilts.                                                               */