@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/Satoshi-Variable.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/Inter-Variable.woff2) format('woff2');}

/* Yusr shared foundation tokens — Quiet Ledger.
   Variables only, no selectors: linking this file changes nothing visually
   by itself. Each page keeps its own theming mechanism (marketing pages use
   html[data-theme], app.html uses body.dark / body.light-forced) and maps its
   existing role tokens onto these constants, so light/dark switching stays
   exactly where it already lives. Dark-mode constants carry a -dk suffix. */
:root{
  /* Brand */
  --y-brand:#2F5D47;
  --y-brand-dark:#1B3A2B;
  --y-brand-dk:#6B9C85;        /* brand green on dark backgrounds (existing value) */

  /* Neutrals — light */
  --y-bg:#F9F9F7;               /* warm off-white page background (light mode) */
  --y-surface:#FFFFFF;
  --y-surface-subtle:#F4F3F0;
  --y-border:#D3D0CA;
  --y-border-strong:#B8B4AC;
  --y-ink:#161A18;
  --y-ink-soft:#4A524E;        /* 8.05:1 on white */
  --y-muted:#5B635F;           /* 5.34:1 on white, 5.10:1 on --y-bg */

  /* Neutrals — dark */
  --y-bg-dk:#050505;
  --y-surface-dk:#0F0F0F;
  --y-modal-dk:#121212;        /* windows and pop-ups in Dark */
  --y-surface-subtle-dk:#161616;
  --y-border-dk:#252525;
  --y-border-strong-dk:#363636;
  --y-ink-dk:#E8EBE9;
  --y-ink-soft-dk:#BDBDBD;
  --y-muted-dk:#A3A3A3;        /* AA on --y-bg-dk and --y-surface-dk (checked by tests/phase-a.spec.js) */
  /* Dark is plain near-black (#050505); no grade. */
  --y-bg-grad-dk:none;

  /* Semantic — text-safe (AA on white / on --y-bg-dk) */
  --y-success:#2F6B45;
  --y-warning:#86601F;
  --y-error:#A3392F;           /* errors, destructive, over budget, negative */
  --y-success-dk:#7FAE96;
  --y-warning-dk:#D2A65E;
  --y-error-dk:#E07A70;

  /* Zakat — feature identity, deliberately NOT an error colour */
  --y-zakat:#A14D40;
  --y-zakat-dk:#C97465;

  /* Typography */
  --y-font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --y-font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* codes only, never figures */
  --y-fs-display:clamp(32px,4.4vw,52px);
  --y-fs-h1:28px;
  --y-fs-h2:20px;
  --y-fs-h3:16px;
  --y-fs-body:15px;
  --y-fs-small:13px;
  --y-fs-label:12px;           /* minimum size for UI text */
  --y-fs-figure-xl:48px;
  --y-fs-figure-l:28px;
  --y-fs-figure:15px;
  --y-fw-regular:400;
  --y-fw-medium:500;
  --y-fw-semibold:600;
  --y-fw-bold:700;
  --y-lh-tight:1.1;
  --y-lh-body:1.6;
  --y-track-display:-0.02em;
  --y-track-label:.04em;
  --y-figures:tabular-nums;    /* use as font-variant-numeric:var(--y-figures) */

  /* Shape */
  --y-radius-sm:6px;           /* inputs, chips */
  --y-radius:10px;             /* buttons, cards */
  --y-radius-lg:16px;          /* sheets, modals */
  --y-radius-pill:999px;       /* status chips, segmented controls only */

  /* Spacing */
  --y-space-1:4px;  --y-space-2:8px;  --y-space-3:12px; --y-space-4:16px;
  --y-space-5:24px; --y-space-6:32px; --y-space-7:48px; --y-space-8:64px;

  /* Elevation — default surfaces are flat; shadows are for overlays */
  --y-shadow-raised:0 1px 2px rgba(22,26,24,.06), 0 4px 12px rgba(22,26,24,.08);
  --y-shadow-modal:0 2px 6px rgba(22,26,24,.08), 0 16px 40px rgba(22,26,24,.18);
}

/* Dark is plain near-black on every marketing page. */
:root[data-theme="dark"] body{background-color:var(--y-bg-dk);}