/* ============================================================
   شمس حلب — نظام التصميم
   THE design system. One source of truth, read by both surfaces:
   the phone app (ios.css) and the website (site.css).

   These tokens used to live inside ios.css, which meant the website
   could only ever approximate the app instead of sharing its language.
   Anything defined here is a decision that holds everywhere; anything
   a single surface needs lives in that surface's own sheet.

   The palette itself is NOT here — it is in tokens.css, which the whole
   project (including the 19 tool pages) already reads. This file is the
   layer above it: scale, rhythm, weight, depth, motion, and the rule
   about where the accent is allowed to appear.
   ============================================================ */

/* ── Type scale ───────────────────────────────────────────────
   Arabic needs more leading than Latin at the same size, and the
   floor is "no tiny Arabic": caption is 13px, metadata only, never
   meaning. Everything multiplies through --type-scale so system text
   sizing moves the whole app without breaking a layout.

   The scale is deliberately TOP-HEAVY now. The previous one ran
   13/15/17/20/26/34/46 and the app spent 43 declarations at 13-15px
   against 8 above 26 — so every element sat in the same middle band
   and nothing could dominate. Opening the top end is what lets one
   number per screen carry the whole composition. */

/* Almarai (SIL OFL 1.1), self-hosted and subset. Owner picked it from a side-by-side
   of nine fonts (26 Sep 2026): soft, round, calm. `optional`, not `swap`: the
   face is preloaded, so it is nearly always there for first paint, and a late
   swap would make the whole page jump (its metrics differ from any fallback). Subset to what the site sets:
   two files per script. The 700 file serves every weight from 600 up, so
   semibold labels never trigger a third download or a synthetic bold. */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url('../fonts/almarai-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url('../fonts/almarai-latin-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00AB, U+00B0-00B2, U+00B7, U+00BB, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2082, U+2190, U+2192, U+2212, U+2248, U+2265;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 600 900;
  font-display: optional;
  src: url('../fonts/almarai-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 600 900;
  font-display: optional;
  src: url('../fonts/almarai-latin-700.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00AB, U+00B0-00B2, U+00B7, U+00BB, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2082, U+2190, U+2192, U+2212, U+2248, U+2265;
}


:root {
  --font-app: 'Almarai', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sized for the person this is actually for: someone over 70, reading a
     phone at arm's length, in Aleppo daylight. Body is 21px, and the
     smallest thing on the site is 16px — the old 13px caption was a
     decision made for density, and density is not what anyone here needs.
     Everything still multiplies through --type-scale, so the text-size
     control moves the whole system together. */
  --t-caption:  calc(16px * var(--type-scale));
  --t-footnote: calc(16px * var(--type-scale));
  --t-body:     calc(18px * var(--type-scale));
  --t-headline: calc(22px * var(--type-scale));
  --t-title:    calc(28px * var(--type-scale));
  --t-large:    calc(34px * var(--type-scale));
  --t-display:  calc(44px * var(--type-scale));

  /* Weight by role, not by taste. Body used to sit at 500 nearly
     everywhere, which is precisely why everything competed: regular
     body read against semibold display is what creates rank at all. */
  --w-body:   400;
  --w-medium: 500;
  --w-strong: 600;

  /* ── Touch ──────────────────────────────────────────────
     44px is the floor, not the target. Hands that shake need more
     margin than hands that don't, so ordinary controls get 56 and the
     one action a screen is built around gets 68. */
  --hit-min:     48px;
  --hit:         56px;
  --hit-primary: 68px;

  --lh-tight: 1.2;        /* display numerals, set solid */
  --lh-snug:  1.4;
  --lh-body:  1.65;

  /* ── Space: 4pt derived, named by intent not by number ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --gutter: 20px;          /* the one screen margin, everywhere */
  /* The gap that separates one idea from the next. Sections used to
     be var(--s-6) apart, the same distance as items INSIDE a section,
     so the eye had no way to tell a boundary from a list. */
  --section: 44px;

  /* ── Radii by role. Not one radius stamped on everything. ── */
  --r-chip: 999px;         /* pills and chips are fully round */
  --r-control: 8px;       /* buttons, inputs */
  --r-tile: 10px;          /* small icon tiles */
  --r-card: 12px;          /* content cards */
  --r-sheet: 16px;         /* sheets, top corners only */

  /* ── Depth. The hairline carries it; the shadow only softens. ── */
  --hairline: 0.5px solid rgba(28, 25, 23, 0.10);
  --lift-1: 0 1px 2px rgba(60, 40, 20, 0.04);
  --lift-2: 0 1px 2px rgba(60, 40, 20, 0.04), 0 4px 12px rgba(60, 40, 20, 0.05);
  --lift-3: 0 2px 6px rgba(60, 40, 20, 0.06), 0 12px 32px rgba(60, 40, 20, 0.08);
  --lift-sheet: 0 -1px 0 rgba(28, 25, 23, 0.06), 0 -12px 48px rgba(60, 40, 20, 0.16);
  /* The inset hairline drawn INSIDE a shadow list (choice cards, chips) —
     same idea as --hairline, different form factor, so it gets its own
     token instead of two components restating the rgba by hand. */
  --inset-hairline: inset 0 0 0 0.5px rgba(28, 25, 23, 0.12);

  /* ── Motion. The sheet curve is the one iOS actually uses; it is
     what makes a panel feel like it has mass. ── */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --out: var(--ease-out);   /* same curve tokens.css already defines */
  --tap: 120ms;
  --move: 260ms;
  --panel: 420ms;

  --app-ground: var(--sand-200);
  --app-card: #FFFFFF;

  /* ── Ink, and one accent ──────────────────────────────────────
     The palette is unchanged — the same two oranges the brand has
     always had. What changed is how often they're spent. The accent
     used to appear 30 times in this file (icon tiles, chips, chevrons,
     the tab bar, quiet buttons, chart legends), which makes it a theme
     colour, not an accent. It now buys exactly two things:

        1. the ONE primary action on a screen
        2. the ONE number that screen exists to tell you

     Everything else is ink on warm paper. Restraint is the only
     reason the orange reads as expensive when it does appear. */
  --ink:        var(--text);
  --ink-soft:   var(--text-muted);
  /* NOT --accent: tokens.css already owns that name for the site's blue,
     and overrides it under [data-theme="night"] at higher specificity than
     a plain :root — which silently turned this app's primary button blue in
     night mode while leaving it correct in light. App-scoped names get the
     --app- prefix so they cannot be captured by the shared sheet again. */
  --app-accent: var(--brand-ink);
  /* Neutral tile fill — what icon tiles, quiet buttons and steppers
     use now that they no longer tint themselves with the accent. */
  --tile:       color-mix(in srgb, var(--text) 6%, transparent);
  --tile-press: color-mix(in srgb, var(--text) 11%, transparent);
}

:root[data-theme="night"] {
  --hairline: 0.5px solid rgba(255, 255, 255, 0.10);
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --lift-2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.28);
  --lift-3: 0 2px 6px rgba(0, 0, 0, 0.32), 0 12px 32px rgba(0, 0, 0, 0.42);
  --lift-sheet: 0 -1px 0 rgba(255,255,255,0.06), 0 -12px 48px rgba(0, 0, 0, 0.6);
  --inset-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);

  --app-ground: #100D0A;
  --app-card: #221C17;
}