:root {
  /* Surfaces — silsila-light (logo-derived: warm greige cream, no pure white) */
  --color-canvas: #f5f1e7;
  --color-surface: #fcfaf4;
  --color-surface-2: #ebe6d8;
  --color-overlay: rgb(28 34 48 / 0.55);

  /* Borders */
  --color-border-subtle: #e6e0d2;
  --color-border-default: #d5cebe;
  --color-border-strong: #a9a192;

  /* Text — charcoal-navy ink (logo), cool cast, no pure black */
  /* Ink = exact logo charcoal #16141B (was approx #1c2230). */
  --color-text-primary: #16141b;
  --color-text-secondary: #565c68;
  /* tertiary darkened to clear WCAG AA on surface/canvas (was #7e828c, 3.68:1). */
  --color-text-tertiary: #6b6e77;
  --color-text-inverse: #f5f1e7;

  /* Brand — exact logo terracotta (hue 17°). Logo #c6582c carries cream text at
   * only 4.16:1; deepened to #bb5127 (4.66:1 AA) for interactive surfaces. The
   * literal #c6582c lives in the SVG assets. brand-secondary = logo ink. */
  --color-brand-primary: #bb5127;
  --color-brand-primary-hover: #a64620;
  --color-brand-primary-fg: #fcfaf4;
  /* Brand-toned TEXT at small sizes. #bb5127 clears AA on white but only
   * 4.31:1 on the cream canvas (#f5f1e7) and 4.08:1 on the /10 tint — darkened
   * to #a84a23 (5.07:1 canvas, 4.80:1 tint). Use for <18px brand-colored copy
   * (links, badges); fills/buttons keep brand-primary. */
  --color-brand-primary-text: #a84a23;
  --color-brand-secondary: #16141b;
  --color-brand-secondary-fg: #f5f1e7;

  /* Status — danger pushed to cooler crimson (hue 27) to separate from the
   * terracotta brand accent (hue 41); warning pulled toward yellow (hue 75). */
  --color-success: #2a7254;
  --color-success-bg: #e7f1eb;
  --color-warning: #845907;
  --color-warning-bg: #f7edd6;
  --color-danger: #9b1c1c;
  --color-danger-bg: #f7e3e1;
  --color-info: #2c5c8a;
  --color-info-bg: #e3edf5;

  /* Figure semantics (A-1) — the money-color convention: owed/negative reads
   * red, received/positive reads green, an ordinary figure reads near-black.
   * Aliased off the status ramp rather than duplicated: custom-property
   * substitution is lazy, so the [data-theme] overrides below flow through
   * these without a parallel dark block. Named separately from --color-danger
   * so the money convention can be retuned without recoloring badges/alerts. */
  --color-num-positive: var(--color-success);
  --color-num-negative: var(--color-danger);
  --color-num-neutral: var(--color-text-primary);
  --color-num-muted: var(--color-text-secondary);

  /* Print surface — physical paper, theme-INDEPENDENT (never overridden in
   * dark/legacy blocks): a printed document is white paper with black ink
   * regardless of the app theme, so the on-screen print preview stays correct
   * in dark mode instead of inheriting app surfaces. */
  --color-print-bg: #ffffff;
  --color-print-fg: #111111;
  --color-print-fg-muted: #555555;
  --color-print-border: #9ca3af;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
  --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.16);

  /* Typography */
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-latin: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;
  --font-receipt: "Noto Sans Arabic", "Noto Sans", monospace;
  /* Figures (A-1). A ledger is read down a column, so money/quantity text gets
   * its own face instead of the UI sans. Every family here ships with an OS
   * (SF Mono/ui-monospace on macOS, Cascadia/Segoe UI Mono on Windows, the
   * generic on Linux) — the desktop build is offline, so a downloaded webfont
   * is not an option. The Arabic families trail the stack so ar-EG's
   * Arabic-Indic digits (٠١٢) land on a designed face rather than whatever the
   * per-glyph fallback picks. */
  --font-numeric: "SF Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
    "IBM Plex Mono", Menlo, Consolas, "IBM Plex Sans Arabic", "Noto Sans Arabic",
    monospace;

  /* Motion */
  --duration-instant: 50ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;

  /* Ease */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Brand tokens are extracted from the committed UI theme by build.mjs. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text-primary); font: 1rem/1.85 var(--font-arabic); }
html[dir="ltr"] body { font-family: var(--font-latin); line-height: 1.6; }
header { max-width: 64rem; margin-inline: auto; padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { font-size: 1.25rem; font-weight: 600; }
.wordmark span { margin-inline-start: .5rem; font-size: 1rem; }
main { max-width: 36rem; margin: 3rem auto; padding: 1.5rem; }
h1 { font-size: 1.875rem; line-height: 1.4; margin: 0 0 1rem; text-wrap: balance; }
p { margin: 0 0 1.5rem; text-wrap: pretty; overflow-wrap: anywhere; }
#intro { color: var(--color-text-secondary); }
section { padding-block: 1.5rem; border-block-start: 1px solid var(--color-border-default); }
#identity { display: block; overflow-wrap: anywhere; margin-block-end: 1.5rem; font-weight: 600; }
[hidden], #identity[hidden] { display: none; }
button { min-height: 44px; padding: .625rem 1.25rem; border: 1px solid var(--color-brand-primary); border-radius: var(--radius-md); font: inherit; font-weight: 600; background: var(--color-brand-primary); color: var(--color-brand-primary-fg); cursor: pointer; transition: background var(--duration-base); }
button:hover { background: var(--color-brand-primary-hover); }
button:active { background: var(--color-brand-secondary); }
button:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; }
button:disabled { cursor: wait; background: var(--color-surface-2); color: var(--color-text-secondary); border-color: var(--color-border-default); }
#language { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-default); font-family: var(--font-latin); }
#language:hover { background: var(--color-surface-2); }
#status[data-state="error"] { color: var(--color-danger); }
#status[data-state="done"] { color: var(--color-success); }
@media (max-width: 480px) { main { margin-block: 1rem; } h1 { font-size: 1.5rem; } #accept { width: 100%; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }