/* ==========================================================================
   Slate design system — Mike Hoffman · tokens.css (source of truth)
   Light + dark. Pattern: define on :root, redefine under the dark media
   query, then let data-theme stamps win in both directions. Style components
   through tokens only — never inside the media query.
   ========================================================================== */

:root {
  /* surfaces & ink */
  --paper:     #F6F6F4;
  --ink:       #232B33;
  --gray:      #5E6670;
  --silver:    #9AA1A9;
  --mist:      #C6CBD1;
  --hairline:  #E2E5E7;

  /* brand accents — semantic only; one brass moment per page */
  --brass:     #8A6A24;   /* primary / identity */
  --harbor:    #3E5C76;   /* highlight, links, selected */
  --oxide:     #A04B3C;   /* risk / negative ONLY */
  --moss:      #4E6E58;   /* positive / progress ONLY */

  /* chart series — validated categorical order; never cycle, never reorder */
  --series-1:  #366FAF;
  --series-2:  #C05B49;
  --series-3:  #B08428;
  --series-4:  #338A5C;
  --series-5:  #7D63B8;
  --series-6:  #1D93AD;

  /* status — reserved; ships with icon + label */
  --good:      #2E7D57;
  --warning:   #A87614;
  --serious:   #B4552F;
  --critical:  #8F2F27;

  /* type */
  --f-display: Seravek, 'Gill Sans', 'Gill Sans MT', 'Source Sans 3',
               'Avenir Next', Helvetica, sans-serif;
  --f-body:    Charter, 'Bitstream Charter', 'Iowan Old Style',
               'Charis SIL', Georgia, serif;
  --f-label:   Seravek, 'Gill Sans', 'Gill Sans MT', 'Source Sans 3',
               'Avenir Next', Helvetica, sans-serif;

  /* scale (1.25 ratio on 16px) */
  --fs-display: clamp(30px, 4.2vw, 42px);
  --fs-h2:      25px;
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-label:   11px;      /* uppercase, letter-spacing .12em, weight 600 */

  --lh-body:    1.65;
  --lh-tight:   1.15;
  --measure:    62ch;

  /* space (8px base) */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 40px;  --s5: 64px;  --s6: 104px;

  --radius: 2px;           /* print-like; large radii are off-voice */
  --shadow: 0 1px 2px rgba(20,24,30,.10), 0 12px 40px rgba(20,24,30,.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B2027;  --ink: #E6E9EC;  --gray: #9AA3AD;
    --silver: #6B7480; --mist: #3A424C; --hairline: #2C333C;
    --brass: #C49A3F;  --harbor: #6C93B4; --oxide: #C77361; --moss: #6FA98A;
    --series-1: #4E86C4; --series-2: #D06A55; --series-3: #BC8628;
    --series-4: #3F9E6E; --series-5: #8F76C8; --series-6: #2BA3BC;
    --good: #4FA37C; --warning: #C49A3F; --serious: #C77361; --critical: #C05B49;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 44px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --paper: #1B2027;  --ink: #E6E9EC;  --gray: #9AA3AD;
  --silver: #6B7480; --mist: #3A424C; --hairline: #2C333C;
  --brass: #C49A3F;  --harbor: #6C93B4; --oxide: #C77361; --moss: #6FA98A;
  --series-1: #4E86C4; --series-2: #D06A55; --series-3: #BC8628;
  --series-4: #3F9E6E; --series-5: #8F76C8; --series-6: #2BA3BC;
  --good: #4FA37C; --warning: #C49A3F; --serious: #C77361; --critical: #C05B49;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 44px rgba(0,0,0,.4);
}

:root[data-theme="light"] {
  --paper: #F6F6F4;  --ink: #232B33;  --gray: #5E6670;
  --silver: #9AA1A9; --mist: #C6CBD1; --hairline: #E2E5E7;
  --brass: #8A6A24;  --harbor: #3E5C76; --oxide: #A04B3C; --moss: #4E6E58;
  --series-1: #366FAF; --series-2: #C05B49; --series-3: #B08428;
  --series-4: #338A5C; --series-5: #7D63B8; --series-6: #1D93AD;
  --good: #2E7D57; --warning: #A87614; --serious: #B4552F; --critical: #8F2F27;
  --shadow: 0 1px 2px rgba(20,24,30,.10), 0 12px 40px rgba(20,24,30,.08);
}

/* base application */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3 { font-family: var(--f-display); line-height: var(--lh-tight);
             letter-spacing: -.005em; text-wrap: balance; }

.label { font-family: var(--f-label); font-size: var(--fs-label);
         font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
         color: var(--gray); }

.figures, table.data td { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--harbor); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Theme-contract layer — Slate package for the MikeOS site rails.
   Aliases + shared component classes every theme must provide (THEMES.md).
   Everything styles through tokens; no raw hex below this line.
   ========================================================================== */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --accent:   var(--brass);
  --accent-2: var(--harbor);
  --neg:      var(--oxide);
  --pos:      var(--moss);
  --wall:     color-mix(in srgb, var(--paper) 96%, var(--ink));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; }

a { color: var(--harbor); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.kicker { font-family: var(--f-label); font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); }

/* Site chrome ---------------------------------------------------------- */
.site-header { display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); }
.site-header .wordmark { font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-h3); color: var(--ink); text-decoration: none; }

.site-nav { display: flex; gap: var(--s3); margin-left: auto; }
.site-nav a { font-family: var(--f-label); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
  text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent-2);
  border-bottom-color: var(--accent-2); }

.page { max-width: 74rem; margin: 0 auto; padding: 0 var(--s3) var(--s6); }
footer.site-footer { margin-top: var(--s5); padding: var(--s3) 0;
  border-top: 1px solid var(--hairline); color: var(--silver);
  font-size: var(--fs-small); font-family: var(--f-label); }

/* Sheets & buttons ------------------------------------------------------ */
.sheet { background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s3); }
.sheet.lifted { border: none; box-shadow: var(--shadow); }

.btn { display: inline-block; font-family: var(--f-label); font-size: 12px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--mist); background: transparent; color: var(--ink);
  text-decoration: none; transition: background .15s ease-out, color .15s ease-out; }
.btn:hover { background: var(--hairline); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--gray); border-color: var(--gray); }
.btn-signature { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* Long-form document ---------------------------------------------------- */
.doc { max-width: var(--measure); }
.doc h1 { font-size: var(--fs-display); margin: var(--s4) 0 var(--s2); }
.doc h2 { font-size: var(--fs-h2); margin: var(--s4) 0 var(--s2); }
.doc h3 { font-size: var(--fs-h3); margin: var(--s3) 0 var(--s1); }
.doc p, .doc li { max-width: 65ch; }
.doc .lede { color: var(--gray); font-size: 18px; }
.doc hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s4) 0; }

/* Data ------------------------------------------------------------------ */
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
table.data th { font-family: var(--f-label); font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); text-align: left; padding: var(--s1);
  border-bottom: 1px solid var(--mist); }
table.data td { padding: var(--s1); border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums; }

.stat { display: inline-flex; flex-direction: column; gap: 4px; min-width: 120px; }
.stat-value { font-family: var(--f-display); font-weight: 600; font-size: 32px;
  font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.stat-label { font-family: var(--f-label); font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); }
.stat-delta { font-size: var(--fs-small); font-family: var(--f-label); }
.stat-delta.up   { color: var(--pos); }
.stat-delta.down { color: var(--neg); }

.wide { overflow-x: auto; }

/* Print ----------------------------------------------------------------- */
@media print {
  .site-nav, .btn { display: none; }
  body { background: #fff; }
}