/* ============================================================
   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 */
  --ink-muted: #767D7D;  /* 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;
  }
}