/* ═══════════════════════════════════════════════════════════════════════════
   كراده 52 — design tokens

   HAND-MAINTAINED. The build does not overwrite this file; everything else
   (index.html, app.css, app.js) is generated from the canvas document.

   This is the entire visual surface. The template carries no colour of its own,
   and the build rewrites its inline radius/shadow literals into the custom
   properties below, so the app can be restyled from here alone.

   Current direction: a modern finance-app surface — neutral near-black ground,
   generously rounded cards floating on it, Montserrat Arabic throughout. The
   accent is the Next Level brand crimson; positive figures stay green, and
   negatives lean browner so a loss does not read as brand chrome.

   Replacing the palette means editing the two blocks marked PALETTE. Nothing
   else in the codebase needs to change.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── type ──────────────────────────────────────────────────────────────
     Montserrat Arabic carries the entire interface: Arabic, Latin, both digit
     sets, and the true minus (U+2212) amounts are formatted with. Self-hosted —
     see fonts.css, which also declares the @font-face rules and turns on tabular
     figures globally.

     --mono is a legacy name the template attaches to every amount. It is no
     longer a monospace; alignment now comes from the `tnum` feature rather than
     from fixed advance widths. */
  --display: "Montserrat Arabic", system-ui, sans-serif;
  --body: "Montserrat Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Montserrat Arabic", ui-sans-serif, system-ui, sans-serif;

  /* ── shape ─────────────────────────────────────────────────────────────
     The single loudest change from the ledger design: 3px corners everywhere
     became a real radius scale. Cards round hard, controls follow at a smaller
     step so they still read as nested inside them. */
  --r-card: 16px;
  --r-control: 10px;
  --r-chip: 6px;
  --r-pill: 999px;

  /* ── PALETTE · light ───────────────────────────────────────────────────
     Cool neutral paper rather than the warm stock of the original. Cards are
     pure white so they lift off it without needing a heavy border. */
  --bg: #F4F5F7;
  --bg-2: #EBEDF1;
  --panel: #FFFFFF;
  --panel-2: #F7F8FA;

  --rule: #E4E7EC;
  --rule-2: #D0D5DD;

  --ink: #0C0E12;
  --ink-2: #414651;
  --ink-3: #61656F;
  --ink-4: #767B85;

  /* Next Level crimson. The brand value #F92748 is only 3.88:1 on white, and
     the accent lands on 13px amounts, so the light theme darkens it to clear
     4.5:1. The dark theme uses the brand value as drawn. */
  --accent: #CC1435;
  --accent-2: #A80B28;
  --wash: #FDE9ED;

  /* The brand mark's white, themed. On the light panel plain white is invisible,
     so it resolves to the ink colour there and stays white on the dark ground. */
  --logo-hi: #171A23;

  --pos: #07804F;

  /* Losses are red by accounting convention, and the brand accent is now also
     red. This leans browner and deeper than the accent — about 22° of hue apart
     — so a negative figure does not read as brand chrome. The true minus sign
     (U+2212) still carries the primary signal. */
  --neg: #A8381F;
  --warn: #B25E09;
  --on-accent: #FFFFFF;
  --on-neg: #FFFFFF;

  /* Shadows carry the elevation the thin borders used to. Two layers: a tight
     contact shadow, then a wide soft one for lift. */
  --shadow: 0 1px 2px rgba(12, 14, 18, .04), 0 12px 32px -12px rgba(12, 14, 18, .12);
  --shadow-modal: 0 32px 64px -24px rgba(12, 14, 18, .35);
  --shadow-toast: 0 20px 48px -16px rgba(12, 14, 18, .28);

  color-scheme: light;
}

html[data-theme="dark"] {
  /* ── PALETTE · dark (default) ──────────────────────────────────────────
     Neutral near-black, not the original's navy. Surfaces step up in
     lightness rather than down, so cards read as raised.

     Accent and positive brighten here to hold their saturation against the
     dark ground; negative warms for the same reason. */
  --bg: #0B0C0F;
  --bg-2: #07080A;
  --panel: #15171C;
  --panel-2: #1B1E24;

  --rule: #262A32;
  --rule-2: #363B45;

  --ink: #F0F2F5;
  --ink-2: #AEB4BE;
  --ink-3: #8C929C;
  --ink-4: #6E747E;

  /* The brand crimson as drawn — 4.62:1 on the panel, so it needs no adjusting
     here. Its label colour flips to near-black: white on this red is only
     3.88:1. */
  --accent: #F92748;
  --accent-2: #FF5C72;
  --wash: #2B1018;

  --logo-hi: #FFFFFF;

  --pos: #2FD98C;
  --neg: #FF9478;
  --warn: #F0B34A;
  --on-accent: #2A0509;
  --on-neg: #2A0B0B;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .75);
  --shadow-modal: 0 32px 72px -24px rgba(0, 0, 0, .85);
  --shadow-toast: 0 20px 52px -18px rgba(0, 0, 0, .8);

  color-scheme: dark;
}