/* ============================================================
   Lamazi — tokens.css
   UI_UX_GUIDE §5 implemented verbatim. Components consume tokens
   only — no raw hex outside this file (guide §10).
   Decision M0.4 (2026-07-24): hand-written tokens, not Tailwind.
   ============================================================ */

:root {
    /* §5.1 color — warm-clinical */
    --paper: #FAF8F4;        /* app background — warm bone, never grey */
    --card: #FFFFFF;         /* cards, sheets */
    --hairline: #E7E1D6;     /* borders — hairlines over shadows */
    --ink: #201D18;          /* text — warm near-black */
    --ink-2: #6B6355;        /* secondary text (AA on paper) */
    --teal: #0F6E6B;         /* primary actions, active states, links */
    --teal-press: #0A5250;
    --teal-tint: #E4F0EF;
    --brass: #8A5A14;        /* secondary accent — highlights, "arrived" */
    --gain: #2E7D46;         /* money in */
    --owe: #B25E09;          /* money owed */
    --alert: #C6322E;        /* RESERVED: medical banner + destructive (Law 2) */
    --alert-bg: #FBE9E7;

    /* status edges (streams & river) */
    --status-booked: #7A8CA3;
    --status-arrived: var(--brass);
    --status-inchair: var(--teal);
    --status-done: #5B7F3B;

    /* §5.2 type — IBM Plex, one system across both scripts */
    --font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
    --fs-caption: 0.8125rem;   /* 13 */
    --fs-body: 0.9375rem;      /* 15 */
    --fs-emph: 1.0625rem;      /* 17 */
    --fs-title: 1.375rem;      /* 22 */
    --fs-display: 1.75rem;     /* 28 */
    --lh-arabic: 1.65;

    /* §5.3 space & shape — 4px grid */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
    --r-sheet: 16px; --r-card: 12px; --r-control: 8px; --r-pill: 999px;
    --shadow-float: 0 8px 24px rgba(32, 29, 24, 0.12); /* floating surfaces only */
    --content-max: 64rem;    /* the reading column (kept for narrow doc surfaces) */
    --gutter: clamp(var(--sp-4), 4vw, var(--sp-7)); /* page side margins — grow with the viewport */

    /* §8 access */
    --focus-ring: 2px solid var(--teal);
}

/* base — logical properties only (Law 3) */
* { box-sizing: border-box; }
html { font-size: 15px; }
html[data-type='large'] { font-size: 17px; } /* §8 per-user large-type */
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
}
:lang(ar) { line-height: var(--lh-arabic); }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* every money and time figure: tabular lining numerals (§5.2) */
.num, time, [data-money] { font-variant-numeric: tabular-nums lining-nums; }
/* numbers inside Arabic prose stay LTR (bidi isolation, Law 3) */
.ltr-isolate { direction: ltr; unicode-bidi: isolate; }

/* §8 focus — visible on every interactive element */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--r-control); }

/* motion (§6): explain, never decorate; honor reduced motion fully */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}