/* ============================================================
   wardogsdatabase.com — design tokens
   Concept: "The Manifest" — quartermaster's ledger, not tacticool.

   Deliberately divergent from MetaForge (warm hue-75 dark + #ed7e1d
   orange + Poppins/Barlow). Here: cool pulp paper, blue-black ink,
   banknote green, IBM Plex superfamily.
   ============================================================ */

:root {
  /* ── Surfaces: pulp paper ── */
  --paper:        #E6E7E3;  /* page */
  --paper-raised: #F2F3F0;  /* panels, rows */
  --paper-sunk:   #DBDCD7;  /* wells, inputs, grid substrate */

  /* ── Ink ── */
  --ink:       #16191A;  /* headings, primary text */
  --ink-2:     #454B4C;  /* body */
  /* Darkened from #767D7D, which scored 3.08–3.67 against the three paper
     surfaces and so failed AA everywhere it was used — and it is used for
     every label, caption and caveat on the site. This clears 4.5 on all
     three (4.50 sunk, 4.94 paper, 5.36 raised) at the same hue. The dark
     palette already passed and is unchanged. */
  --ink-muted: #5C6363;  /* labels, meta, placeholders */

  /* ── Lines ── */
  --rule:        #C6C9C4;
  --rule-strong: #A9ADA7;

  /* ── Money. The accent is a banknote green and it means one thing:
        value. Never used decoratively. ── */
  --money:      #14594A;
  --money-lift: #1B7561;  /* hover */
  --money-wash: #14594A14;

  /* ── Semantic. Oxide is reserved for over-budget and destructive.
        It is not a second brand colour. ── */
  --flag:      #8C2F1C;
  --flag-wash: #8C2F1C14;
  --caution:   #7A5B12;

  /* ── Type ──
     Plus Jakarta Sans: geometric, open, generous counters — modern without
     being soft. JetBrains Mono for every figure: designed for reading dense
     numerals at small sizes, which is most of this product. */
  --f-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-ui:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-data:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* ── Scale. Tight, tool-like. Nothing decorative. ── */
  --t-mega:  clamp(30px, 4vw, 42px);
  --t-lg:    21px;
  --t-md:    16px;
  --t-sm:    14px;
  --t-xs:    12.5px;
  --t-label: 10.5px;

  /* ── Space: 4px base ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* Squared. A ledger has no rounded corners. 2px is the single
     concession, on interactive chips only. */
  --radius: 2px;

  --grid-cell: 15px;  /* inventory-grid unit */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:        #14171A;  /* cold blue-black, not MetaForge's warm neutral */
    --paper-raised: #1C2124;
    --paper-sunk:   #0E1113;
    --ink:          #E3E6E4;
    --ink-2:        #B4BAB8;
    --ink-muted:    #7E8785;
    --rule:         #2A3033;
    --rule-strong:  #3D4548;
    --money:        #4FBF9B;
    --money-lift:   #6FD6B4;
    --money-wash:   #4FBF9B1f;
    --flag:         #E0724F;
    --flag-wash:    #E0724F1f;
    --caution:      #D6AC4E;
  }
}

:root[data-theme='dark'] {
  --paper:        #14171A;
  --paper-raised: #1C2124;
  --paper-sunk:   #0E1113;
  --ink:          #E3E6E4;
  --ink-2:        #B4BAB8;
  --ink-muted:    #7E8785;
  --rule:         #2A3033;
  --rule-strong:  #3D4548;
  --money:        #4FBF9B;
  --money-lift:   #6FD6B4;
  --money-wash:   #4FBF9B1f;
  --flag:         #E0724F;
  --flag-wash:    #E0724F1f;
  --caution:      #D6AC4E;
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Every number in this product is monospaced and tabular. Prices,
   weights, grid dimensions, counts. It is the core of the identity. */
.num, .price, td.num {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

.label {
  font-family: var(--f-display);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Geist has no condensed cut, so headings take their character from a
   tighter track and a heavier weight rather than a narrower width. */
h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

a { color: var(--money); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--money);
  outline-offset: 2px;
}

button { font: inherit; color: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}