/* ═══════════════════════════════════════════════════════════
   invoiceready.ae — "الدفتر / The Ledger" v2
   THE single source of truth. Link this before any page CSS.
   No page may declare its own :root palette.

   Rules of the system:
   · Structure is built from rules + whitespace. No shadows.
   · No gradients. No border-radius. No emoji as iconography.
   · Contrast comes from solid ink bands against paper.
   · Presence comes from typographic scale, not decoration.
   · Logical properties only — the site is Arabic-first RTL.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── paper surfaces ── */
  --paper:#F3F1EC;
  --paper-2:#FBFAF7;
  --paper-3:#E9E5DC;

  /* ── ink ── */
  --ink:#16191D;
  --ink-2:#2E3339;      /* secondary text that still has weight */
  --muted:#6A7076;      /* genuinely tertiary only */

  /* ── rules: two tiers, like a real ledger ── */
  --rule:#D3CDBF;       /* hairline — rows, cells */
  --rule-soft:#E2DED4;  /* faintest — inside dense tables */
  --rule-heavy:var(--ink); /* 2px section breaks */

  /* ── the ink band (nav, mastheads, footers) ──
     text on ink needs its OWN token set — it cannot borrow paper's.
     Warmed to share paper's undertone (was a cool #16191D/#9AA0A4 —
     read as two unrelated palettes stacked, not one system). */
  --band:#1B1815;
  --band-2:#231F1B;
  --band-text:#F3F1EC;
  --band-muted:#A39A8C;
  --band-rule:#3A342C;

  /* ── brand ── */
  --petrol:#17403D;
  --petrol-live:#1D4E4B;   /* interactive / hover */
  --petrol-wash:rgba(23,64,61,.07);
  --petrol-on-band:#7FB3AC; /* the only petrol legible on ink */
  --brass:#A87F42;
  --brass-live:#C39A57;
  --brass-wash:rgba(168,127,66,.10);

  /* the seam: the one line that stitches ink band to paper.
     Every band→paper edge (nav, hero, masthead) closes on this,
     not a hairline — it's the connective thread the logo mark
     is also drawn in, so the eye reads top and bottom as one object. */
  --seam:var(--brass-live);

  /* ── state — never decoration ── */
  --ok:#3B6E51;   --ok-wash:rgba(59,110,81,.10);
  --warn:#8A6524; --warn-wash:rgba(138,101,36,.10);
  --bad:#96372A;  --bad-wash:rgba(150,55,42,.09);

  /* ── type ── */
  --font:"Readex Pro","IBM Plex Sans Arabic",-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  /* IBM Plex Mono carries no Arabic glyphs. Readex Pro is appended so Arabic
     characters inside any mono run shape correctly instead of dropping to a
     mismatched system fallback. Latin + figures still render in Plex Mono. */
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,"Readex Pro","IBM Plex Sans Arabic",monospace;

  /* declared scale — presence lives here */
  --fs-display:clamp(2.4rem,6vw,4.2rem);
  --fs-h1:clamp(1.8rem,4vw,2.7rem);
  --fs-h2:clamp(1.3rem,2.6vw,1.75rem);
  --fs-h3:1.05rem;
  --fs-body:1rem;
  --fs-small:.9rem;
  --fs-micro:.74rem;

  --lh-display:1.08;
  --lh-head:1.28;
  --lh-body:1.75;
  --tr-display:-.03em;   /* tight tracking at display sizes */
  --tr-label:.12em;      /* open tracking on micro labels */

  /* ── geometry + motion ── */
  --radius:0px;
  --ease:cubic-bezier(.2,.6,.2,1);   /* mechanical, not springy */
  --dur-fast:.14s;
  --dur-slow:.5s;
}

/* ── primitives every page may use ── */

.num,[data-num],[data-count]{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.display{
  font-size:var(--fs-display);
  font-weight:300;
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  text-wrap:balance;
}

.label{
  font-family:var(--mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--muted);
}

/* solid ink band — the primary contrast device */
.band{background:var(--band);color:var(--band-text)}
.band .label{color:var(--band-muted)}
.band a{color:var(--petrol-on-band)}

/* the double rule: heavy over hairline, a real ledger convention */
.rule-double{border-top:2px solid var(--ink);box-sizing:content-box;padding-top:3px;border-bottom:1px solid var(--rule)}

/* animated rule — motion.js flips .in when it scrolls into view */
.rule-draw{
  transform:scaleX(0);
  transform-origin:inline-start center;
  transition:transform var(--dur-slow) var(--ease);
}
.rule-draw.in{transform:scaleX(1)}

:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
::selection{background:var(--petrol-wash);color:var(--ink)}

/* ── Arabic script integrity ──
   letter-spacing opens gaps between joined Arabic letterforms and reads as
   broken. In RTL every element is forced to zero tracking — Latin labels on
   the page lose an amount the eye cannot register. LTR keeps its tracking. */
html[dir="rtl"] *{letter-spacing:0 !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .rule-draw{transform:none}
}