/* styles/ds.css — v1431. DESIGN LANGUAGE II · THE ONE SOURCE (DESIGN-LANGUAGE.md "Design Language II").
   Owner (2026-09-29): "have it somewhere where things can't just run amok … one change and it'll change everything."
   EVERY value a converted surface uses comes from here: corners, the type ramp, colour roles, the four area tints,
   materials, motion. Change a value HERE and every converted surface follows; set it anywhere else and
   verify/design-lock.js refuses the push. The palette itself is still owned by styles/al.css (rule A1): this file only
   NAMES roles on top of it, so no hex lives here.
   The knobs reach everything: --k-radius (corners), --k-type (text), and body.tint-plain (area colours → paper + ink).
   COMPONENTS that use these: styles/ds-ui.css + modules/shared/ds-ui.js (Mithlayn.ui2). SAFE TO DELETE: never. */
:root {
  /* ── corners: four that nest (concentric), and the capsule ─────────────────────────────── */
  --r-icon:calc(8px * var(--k-radius) / 1.1429);    /* a glyph tile, a small chip */
  --r-ctl:calc(12px * var(--k-radius) / 1.1429);    /* a control: a button, a field, a tile */
  --r-grp:calc(22px * var(--k-radius) / 1.1429);    /* an inset group of rows */
  --r-win:calc(34px * var(--k-radius) / 1.1429);    /* a window or sheet */
  --r-cap:999px;                                    /* capsules and round buttons */

  /* ── the type ramp: ten steps, nothing below 12 ───────────────────────────────────────── */
  --fs-large:calc(34px * var(--k-type)); --fs-t1:calc(28px * var(--k-type)); --fs-t2:calc(22px * var(--k-type)); --fs-t3:calc(20px * var(--k-type));
  --fs-head:calc(17px * var(--k-type)); --fs-body:calc(17px * var(--k-type)); --fs-call:calc(16px * var(--k-type)); --fs-sub:calc(15px * var(--k-type));
  --fs-foot:calc(13px * var(--k-type)); --fs-cap:calc(12px * var(--k-type));
  --fs-hero:calc(132px * var(--k-type));           /* one number that IS the screen (the tasbīḥ count) */
  --fw-light:300; --fw-reg:500; --fw-med:600; --fw-bold:700; --fw-heavy:800;
  --ds-font:var(--f-ui); --ds-font-ar:var(--f-ar); --ds-font-quran:var(--f-quran);
  --ds-track-title:-.02em;

  /* ── spacing: one unit, the density knob reaches it ───────────────────────────────────── */
  --sp-1:calc(4px * var(--k-density)); --sp-2:calc(8px * var(--k-density)); --sp-3:calc(12px * var(--k-density)); --sp-4:calc(16px * var(--k-density)); --sp-5:calc(24px * var(--k-density));
  --row-h:calc(52px * var(--k-density)); --tap:44px;

  /* ── motion: springs (modules/shared/motion.js) for anything that moves; these for the rest ── */
  --dur-1:120ms; --dur-2:240ms; --dur-3:360ms;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-back:cubic-bezier(.34,1.56,.64,1); --ease-thumb:cubic-bezier(.3,1.25,.5,1);
}
/* colour roles live on BODY, not :root: the Night palette is re-declared on body.theme-dark, and a role declared at
   :root would be resolved there (with the Day values) and inherited already fixed. On body they re-resolve per theme. */
body {
  /* ── colour roles (from al.css's grounds; they follow Day / Night and every paper) ─────── */
  --c-page:var(--al-paper); --c-card:var(--al-card); --c-fill:var(--al-card2); --c-ink:var(--al-ink); --c-ink2:var(--al-ink2); --c-mut:var(--al-mut);
  --c-hair:var(--al-line); --c-scrim:var(--al-scrim); --c-acc:var(--al-acc); --c-acc-ink:var(--al-acc-ink);
  --c-danger:var(--hm-qr); --c-good:var(--hm-dr);
  --c-press:color-mix(in srgb, var(--al-ink) 8.5%, transparent);
  --c-knob:white; --sh-knob:0 2px 6px color-mix(in srgb, black 22%, transparent); --sh-thumb:0 1px 3px color-mix(in srgb, black 14%, transparent);
  /* the four areas (the Mutashābihāt window's own): Learn blue, Memorize green, Worship rose, Listen gold */
  --c-learn:var(--hm-st); --c-learn-soft:var(--hm-st-soft); --c-mem:var(--hm-dr); --c-mem-soft:var(--hm-dr-soft);
  --c-wor:var(--hm-qr); --c-wor-soft:var(--hm-qr-soft); --c-lis:var(--hm-gold); --c-lis-soft:var(--hm-gold-soft);
  /* a surface's own area: --c-on (title, glyph tile, selected, the prominent button), --c-soft (its wash) */
  --c-on:var(--c-ink); --c-soft:var(--c-fill); --c-on-ink:var(--c-page);
  /* the accent — clay by default (owner's pick, v1489, "Inset"; site-wide since v1490). Settings › Appearance › Accent sets
     html[data-accent] = green | blue | black | grey (below); every one is a ground's own ink or area hue, so it follows the paper
     and Day / Night. --c-accent-ink is what sits on it (the page colour), --c-accent-soft its wash. */
  --c-clay:var(--hm-clay); --c-clay-ink:var(--c-page); --c-clay-soft:color-mix(in srgb, var(--c-clay) 13%, transparent);
  --c-accent-grey:color-mix(in srgb, var(--al-ink) 70%, var(--al-paper));   /* for Settings' dot */
  --c-accent:var(--c-clay); --c-accent-ink:var(--c-page); --c-accent-soft:color-mix(in srgb, var(--c-accent) 13%, transparent);

  /* ── materials: glass only for chrome that floats over the page; content is solid ─────── */
  --mat-chrome:color-mix(in srgb, var(--al-paper) 72%, transparent); --mat-blur:blur(24px) saturate(1.6);
  --mat-thin:color-mix(in srgb, var(--al-paper) 55%, transparent);
  --sh-float:0 0 0 .5px var(--c-hair), 0 12px 30px -18px color-mix(in srgb, var(--al-ink) 30%, transparent);
  --sh-win:0 0 0 .5px var(--c-hair), 0 24px 60px -28px color-mix(in srgb, var(--al-ink) 35%, transparent);
  /* ── the Notebook's inks (notebook.js, v1554): what you write with is content, not chrome, so each keeps its own colour
     whatever the accent or the area tints; each has a Night shade below (the Write mockup's island A inks) ── */
  --ink-sepia:#6e4a2a; --ink-red:#a3261e; --ink-blue:#1f4f8a; --ink-green:#2f6b3a; --ink-gold:#9a7420;
}
body.theme-dark { --ink-sepia:#cfa57c; --ink-red:#e57f72; --ink-blue:#8db4ea; --ink-green:#8fcf98; --ink-gold:#e0c070; }
body.theme-dark { --c-press:color-mix(in srgb, var(--al-ink) 14%, transparent); --mat-chrome:color-mix(in srgb, var(--al-paper) 70%, transparent); --c-clay-soft:color-mix(in srgb, var(--c-clay) 18%, transparent);
  --c-accent-soft:color-mix(in srgb, var(--c-accent) 18%, transparent); }
html[data-accent="green"] body { --c-accent:var(--hm-dr); }
html[data-accent="blue"] body  { --c-accent:var(--hm-st); }
html[data-accent="black"] body { --c-accent:var(--al-ink); }    /* at night the ground's ink is light: "black" stays the strongest ink */
html[data-accent="grey"] body  { --c-accent:var(--c-accent-grey); }   /* the ink softened toward the paper: a true dark grey (al-ink2 is nearly the ink) */
/* an area is set on the surface that wears it */
[data-area="learn"] { --c-on:var(--c-learn); --c-soft:var(--c-learn-soft); }
[data-area="mem"]   { --c-on:var(--c-mem);   --c-soft:var(--c-mem-soft); }
[data-area="wor"]   { --c-on:var(--c-wor);   --c-soft:var(--c-wor-soft); }
[data-area="lis"]   { --c-on:var(--c-lis);   --c-soft:var(--c-lis-soft); }
/* Settings › Colours › Plain: paper + ink (v1420) — reaches every converted surface through this one line */
body.tint-plain [data-area] { --c-on:var(--c-ink); --c-soft:var(--c-page); }
@media (prefers-reduced-motion:reduce) { :root { --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; } }
@media (prefers-reduced-transparency:reduce) { body { --mat-chrome:var(--c-page); --mat-thin:var(--c-page); --mat-blur:none; } }