/* ==========================================================================
   FinTrack paper — the one token block every FinTrack page shares.

   Linked FIRST by every page (templates/base.html), so app.css reads one
   palette. Look: mark.dev paper (Mark007-R.github.io). Only the ACCENT and
   SERIES blocks are project-specific — FinTrack is Pine.
   ========================================================================== */

:root {
  /* paper */
  --bg: #fefaf5;
  --bg-alt: #faf2e9;
  --card: #fffdfa;
  --card-hover: #ffffff;
  --ink: #1c1714;
  --ink-2: #57504a;
  --ink-3: #756c65;
  --line: #e9dbcd;
  --line-strong: #d8c3b2;
  --placeholder: #a89a8f;
  --scrim: rgba(28, 23, 20, .42);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .04), 0 4px 16px rgba(60, 40, 20, .05);
  --shadow-md: 0 2px 4px rgba(60, 40, 20, .05), 0 14px 38px rgba(60, 40, 20, .09);
  --ease: .25s cubic-bezier(.4, 0, .2, 1);
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* ACCENT — Pine */
  --accent: #1D6B3A;
  --accent-strong: #16552E;
  --accent-soft: #4C8F63;
  --accent-tint: rgba(29, 107, 58, .06);
  --accent-glow: rgba(29, 107, 58, .14);
  --accent-line: rgba(29, 107, 58, .24);
  --on-accent: #fefaf5;

  /* SERIES — chart identity. Money in is Pine, money out is Ochre (validated as a
     pair: colour-blind ΔE 14.2, ≥3:1 on the card), used for marks only, never text. */
  --series-in: #1D6B3A;
  --series-out: #C08532;
  --series-out-tint: rgba(192, 133, 50, .12);

  /* status colours — same meaning in every project, always on their tint */
  --ok: #3f7a3a;    --ok-tint: rgba(63, 122, 58, .10);    --ok-line: rgba(63, 122, 58, .25);
  --warn: #a86a12;  --warn-tint: rgba(168, 106, 18, .10); --warn-line: rgba(168, 106, 18, .25);
  --bad: #b3261e;   --bad-tint: rgba(179, 38, 30, .08);   --bad-line: rgba(179, 38, 30, .22);
  --info: #2f5f8a;  --info-tint: rgba(47, 95, 138, .09);  --info-line: rgba(47, 95, 138, .22);
}

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

/* paper ground + the mark.dev dot texture, dots drawn in the accent (%231D6B3A) */
html {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='%231D6B3A'%3E%3Ccircle cx='52' cy='71' r='1.4' opacity='.28'/%3E%3Ccircle cx='178' cy='38' r='.9' opacity='.22'/%3E%3Ccircle cx='312' cy='95' r='1.6' opacity='.3'/%3E%3Ccircle cx='458' cy='52' r='1' opacity='.24'/%3E%3Ccircle cx='546' cy='128' r='1.3' opacity='.26'/%3E%3Ccircle cx='96' cy='188' r='1.1' opacity='.25'/%3E%3Ccircle cx='236' cy='222' r='1.5' opacity='.28'/%3E%3Ccircle cx='392' cy='176' r='.9' opacity='.2'/%3E%3Ccircle cx='508' cy='246' r='1.4' opacity='.27'/%3E%3Ccircle cx='28' cy='298' r='1.2' opacity='.24'/%3E%3Ccircle cx='158' cy='344' r='1.6' opacity='.3'/%3E%3Ccircle cx='286' cy='312' r='1' opacity='.22'/%3E%3Ccircle cx='430' cy='366' r='1.3' opacity='.26'/%3E%3Ccircle cx='566' cy='402' r='1.1' opacity='.23'/%3E%3Ccircle cx='72' cy='452' r='1.5' opacity='.29'/%3E%3Ccircle cx='204' cy='486' r='.9' opacity='.21'/%3E%3Ccircle cx='348' cy='438' r='1.4' opacity='.27'/%3E%3Ccircle cx='482' cy='528' r='1.2' opacity='.25'/%3E%3Ccircle cx='128' cy='566' r='1.3' opacity='.26'/%3E%3Ccircle cx='268' cy='592' r='1' opacity='.22'/%3E%3Ccircle cx='412' cy='556' r='1.5' opacity='.28'/%3E%3Ccircle cx='588' cy='486' r='.9' opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* body stays transparent so the texture on <html> shows through */
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }