/* ============================================================
   DECISIVE — Design Tokens
   Single source of truth for color, type, and spacing.

   BRAND RULES — LOCKED. Read these before editing.

   R1. Forest is the surface. (--green)
   R2. Warm white (--paper, #FBF8EE) carries the data. Never beige,
       never ivory, never pure #FFF.
   R3. Brass marks the verified total. ONE brass element per surface.
   R4. Walnut is a quiet accent. Never combined with brass on the
       same element.
   R5. Two type faces only: Rokkitt 700 + Courier New. No italics.
   R6. No emoji, no icons (except the brass dot).
   R7. No gradients, glows, blurs, bouncy motion. Flat fills only.
   R8. MONETARY RULE: a dollar amount is ONE color, end to end.
   R9. WORDMARK RULE: "DECISIVE" followed by a brass dot — a period
       at the baseline, NOT a tittle above the I.
   ============================================================ */

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

:root {
  /* ── Color ──────────────────────────────────────────────── */
  --green:        #1F3F2A;
  --green-deep:   #16301F;
  --green-ink:    #0F2416;
  --green-tint:   #2A4D36;

  --brass:        #836B3F;
  --brass-soft:   #A48A5C;
  --brass-deep:   #5E4B2A;

  --walnut:       #533A1C;
  --walnut-soft:  #7A593A;

  --cranberry:      #8B2E3B;
  --cranberry-soft: #A84854;

  --ink-brown:    #1A1410;

  --paper:        #FBF8EE;
  --paper-2:      #F3EEDF;
  --paper-3:      #E4DCC4;
  --cream:        #FDFBF3;

  --rule:           rgba(26, 20, 16, .14);
  --rule-on-green:  rgba(251, 248, 238, .18);

  /* ── Type ───────────────────────────────────────────────── */
  --ff-display: 'Rokkitt', Rockwell, 'Roboto Slab', Georgia, serif;
  --ff-body:    'Courier New', 'Courier Std', 'Source Code Pro', Courier, monospace;

  --fs-display-xl: 64px;
  --fs-display-lg: 48px;
  --fs-display-md: 32px;
  --fs-display-sm: 24px;

  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-meta:       11px;

  --lh-display: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.05;

  --ls-meta:    .22em;
  --ls-body:    .02em;
  --ls-display: .005em;

  /* ── Spacing ────────────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   80px;
}

/* ── Globals ──────────────────────────────────────────────── */
html, body {
  margin: 0;
  background: var(--green);
  color: var(--paper);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* RULE: italics are not used in the Decisive system. Ever. */
*, *::before, *::after { font-style: normal !important; }

.ff-display  { font-family: var(--ff-display); letter-spacing: var(--ls-display); }
.ff-body     { font-family: var(--ff-body);    letter-spacing: var(--ls-body); }

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--paper);
  opacity: .75;
}
.eyebrow--ink { color: #6b6357; opacity: 1; }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--green);
  color: var(--green);
  padding: 4px 10px;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.stamp.on-green {
  border-color: var(--brass-soft);
  color: var(--brass-soft);
}
.stamp .dot {
  width: 6px;
  height: 6px;
  background: var(--brass);
  border-radius: 50%;
}