/* ── Design tokens ──
   The one reconciled set, from DESIGN.md. Loaded by the root layout ahead of
   @stack('styles'), so a page-level stylesheet still wins: chat.css and
   admin.css keep their own :root declarations and render exactly as before,
   while pages that never had a palette finally have one.

   That ordering is the whole migration strategy. Those two files each declared
   :root independently and drifted apart on four values — ground, text, muted and
   border — and the rabbi pages, loading neither, resolved a var() to nothing for
   months. Reconciling by overwriting both at once would risk the screens that
   already work; this way new work reads one set and the old files migrate onto
   it when someone has a reason to touch them. */

:root {
    /* Chrome — every piece of navigation furniture in the product */
    --hg-chrome: #1e1e2e;
    --hg-chrome-ink: #ffffff;
    --hg-chrome-ink-dim: rgba(255, 255, 255, 0.68);
    --hg-chrome-hairline: rgba(255, 255, 255, 0.08);
    --hg-chrome-fill: rgba(255, 255, 255, 0.10);
    --hg-chrome-fill-strong: rgba(255, 255, 255, 0.16);

    /* Ground and surfaces */
    --hg-ground: #f4f6f8;
    --hg-surface: #ffffff;
    --hg-surface-raised: #ffffff;
    --hg-surface-sunken: #eef1f4;
    --hg-field: #ffffff;

    /* Ink */
    --hg-text: #212529;
    --hg-muted: #676d7b;
    --hg-border: #dee2e6;
    --hg-border-soft: rgba(0, 0, 0, 0.07);

    /* The one colour that acts */
    --hg-primary: #0d6efd;
    --hg-primary-hover: #0b5ed7;
    --hg-primary-wash: rgba(13, 110, 253, 0.10);
    --hg-primary-ring: rgba(13, 110, 253, 0.25);
    --hg-citation: #2563eb;
    --hg-citation-hover: #1d4ed8;

    /* State — reports, never acts */
    --hg-gold: #fbbf24;
    /* The ✡ when it sits on the PAGE rather than on chrome.
       #fbbf24 is right on the dark plum and measures 1.54:1 on the light ground —
       the mark all but disappears, which is a legibility problem before it is an
       aesthetic one. Same construction DESIGN.md already uses for the gold
       WAITING state, which carries a dark ink on a light surface for the same
       reason. Measured: 4.64:1 on #f4f6f8. */
    --hg-mark-ink: #b45309;
    /* Link TEXT. The action blue is correct as a button fill, where white sits on
       it — but as small text it measures 4.15:1 on white and 4.23:1 on the dark
       surface, both under AA. One step deeper here, one step lighter in the dark
       block below. */
    --hg-link: #0b5ed7;
    /* Ink for text sitting ON gold — the tally badge. Gold is too light to
       carry white or the body ink at this size. */
    --hg-gold-ink: #3b2600;
    --hg-waiting-fill: rgba(251, 191, 36, 0.16);
    --hg-waiting-edge: rgba(251, 191, 36, 0.38);
    --hg-waiting-ink: #96450a;
    --hg-working-fill: rgba(59, 130, 246, 0.16);
    --hg-working-ink: #1d4ed8;
    --hg-done-fill: rgba(34, 197, 94, 0.14);
    --hg-done-edge: rgba(34, 197, 94, 0.32);
    --hg-done-ink: #147b3b;
    --hg-danger: #d9384a;
    /* The same translucent-fill / darker-ink construction as the other states
       in DESIGN.md, so a refusal on a form looks like the rest of the product
       rather than like a browser alert. Ratios computed against the composited
       fill, not guessed: 6.69:1 here, 7.51:1 in dark mode below. */
    --hg-danger-wash: rgba(217, 56, 74, 0.10);
    --hg-danger-edge: rgba(217, 56, 74, 0.32);
    --hg-danger-ink: #a4162a;

    /* The psak. Its own identity because the three state hues are all spoken
       for — gold waits, blue acts, green is finished — and a rabbi's answer is
       none of those things.
       Warm and light rather than inverted, and gold rather than plum. A psak is
       the one message on the page meant to be read closely and it can run long;
       white on near-black is the wrong ground for that, and it read as a
       terminal rather than as a תשובה. Gold carries the standing instead. */
    --hg-psak-bg: #fdfaf2;
    --hg-psak-ink: #2b2419;
    --hg-psak-edge: #d9bd72;
    --hg-psak-name: #7d5b10;
    --hg-psak-rule: rgba(160, 122, 40, 0.26);
    --hg-psak-link: #2563eb;

    /* The app shell's two lifts: a header casting down and a footer casting up,
       so both read as fixed furniture the content passes behind rather than as
       bands bordered against it. */
    --hg-lift-down: 0 10px 22px -16px rgba(0, 0, 0, 0.22);
    --hg-lift-up: 0 -10px 22px -14px rgba(0, 0, 0, 0.30);

    /* Depth. One shadow, with a real offset and a soft blur. */
    --hg-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --hg-shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.05);

    /* Shape */
    --hg-r-xs: 4px;
    --hg-r-sm: 6px;
    --hg-r-md: 8px;
    --hg-r-lg: 10px;
    --hg-r-xl: 12px;
    --hg-r-bubble: 16px;
    --hg-r-tail: 4px;
    --hg-r-pill: 999px;

    /* Space */
    --hg-s-1: 4px;
    --hg-s-2: 8px;
    --hg-s-3: 12px;
    --hg-s-4: 16px;
    --hg-s-5: 24px;
    --hg-s-6: 32px;

    /* Type. One system stack — no webfont is loaded, and that is a decision:
       the reader's OS already renders Hebrew well in its own UI face. */
    --hg-font: 'Segoe UI', Arial, sans-serif;

    /* Reader-adjustable scale. PRODUCT.md records display settings as a
       confirmed requirement, not yet built; every size below derives from this
       one value so the panel, when it lands, sets a single property. */
    --hg-scale: 1;
    --hg-t-display: calc(1.5rem * var(--hg-scale));
    --hg-t-title: calc(1.05rem * var(--hg-scale));
    --hg-t-body: calc(0.95rem * var(--hg-scale));
    --hg-t-ui: calc(0.875rem * var(--hg-scale));
    --hg-t-meta: calc(0.8rem * var(--hg-scale));
    --hg-t-hint: calc(0.75rem * var(--hg-scale));
    --hg-t-micro: calc(0.7rem * var(--hg-scale));

    /* Hebrew has no ascenders and descenders to separate lines optically, so
       leading does that work. The one firm typographic decision in the system. */
    --hg-lh-prose: 1.7;
    --hg-lh-ui: 1.5;

    /* Motion */
    --hg-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hg-fast: 0.15s;
    --hg-med: 0.25s;

    /* Reading measure */
    --hg-measure: 800px;

    /* Behind an off-canvas panel. */
    --hg-scrim: rgba(10, 10, 18, 0.5);
}

[data-theme="dark"] {
    /* On the dark surface the mark needs no help, and the link goes LIGHTER
       rather than deeper — #0b5ed7 on #1e1e2e measures 2.81:1. */
    --hg-mark-ink: #fbbf24;
    --hg-link: #9ec5fe;

    --hg-ground: #0f0f1a;
    --hg-surface: #1e1e2e;
    --hg-surface-raised: #252535;
    --hg-surface-sunken: #16162a;
    --hg-field: #2a2a3e;

    --hg-text: #e2e6ea;
    --hg-muted: #949cab;
    --hg-border: rgba(255, 255, 255, 0.10);
    --hg-border-soft: rgba(255, 255, 255, 0.07);

    --hg-citation: #3b82f6;
    --hg-citation-hover: #60a5fa;

    --hg-waiting-ink: #fcd34d;
    --hg-working-ink: #93c5fd;
    --hg-done-ink: #86efac;
    --hg-danger: #ff7d8a;
    --hg-danger-wash: rgba(217, 56, 74, 0.16);
    --hg-danger-edge: rgba(255, 125, 138, 0.30);
    --hg-danger-ink: #ff9aa4;

    --hg-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --hg-shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.25);

    --hg-psak-bg: #241f14;
    --hg-psak-ink: #f1e8d5;
    --hg-psak-edge: #6f5c2c;
    --hg-psak-name: #e9c05f;
    --hg-psak-rule: rgba(233, 192, 95, 0.22);
    --hg-psak-link: #9ec5fe;

    --hg-lift-down: 0 10px 22px -16px rgba(0, 0, 0, 0.55);
    --hg-lift-up: 0 -10px 22px -14px rgba(0, 0, 0, 0.6);

    --hg-scrim: rgba(0, 0, 0, 0.62);
}

/* ── Reader text size ──
   A confirmed product requirement (PRODUCT.md, "display settings belong to the
   reader"): the corpus is Hebrew, Hebrew set small is harder to read than Latin
   set small, and whether the audience skews older is unknown — so the safer
   default is to let the reader decide rather than to guess.

   The mechanism is the ROOT FONT SIZE, not --hg-scale, and that is a correction
   to the plan DESIGN.md recorded. --hg-scale only reaches what reads tokens.css,
   which is the rabbi workspace; chat.css mentions it ZERO times and admin.css
   likewise, while chat.css uses `rem` 97 times. The reader this setting exists
   for is the ASKER, on the one page the token scale does not touch. Moving the
   root size moves every rem in all four stylesheets and in Bootstrap, at once.

   It does not double-scale the workspace: --hg-scale stays at 1 and its tokens
   are calc(Xrem * var(--hg-scale)), so the rem underneath them grows once.

   Percentages, not px, so a reader who has already set a larger default in their
   browser keeps it and this multiplies from there rather than overriding it. */
html[data-text="large"]  { font-size: 112.5%; }
html[data-text="larger"] { font-size: 125%; }

/* ── Device edges ──
   What the hardware has already claimed of the screen: a notch, a curved
   corner, an iOS home indicator, an Android gesture bar or three-button nav.

   env() is INERT without viewport-fit=cover in the viewport meta — it resolves
   to 0px, silently, which is why a safe-area rule written without it does
   nothing at all and looks correct in review. The meta is set in
   layouts/app.blade.php; these are the values it unlocks, named once so no
   surface re-derives them.

   PHYSICAL, not logical, on purpose. A gesture bar is on a physical edge of the
   glass and stays there; this document is dir="rtl", so the inline-start edge
   is the right one and changes side with the language while the hardware does
   not. Mixing the two is how an inset ends up on the wrong side.

   Add them, do not max() them: `calc(base + inset)` degrades to exactly the
   desk value when the inset is 0, and on a phone puts the control clear of the
   bar rather than flush against it. Flush is worse than it sounds — Android
   swallows swipes that start inside the gesture strip, so a composer sitting on
   it loses taps as well as looking wrong. */
:root {
    --hg-edge-top: env(safe-area-inset-top, 0px);
    --hg-edge-bottom: env(safe-area-inset-bottom, 0px);
    --hg-edge-left: env(safe-area-inset-left, 0px);
    --hg-edge-right: env(safe-area-inset-right, 0px);

    /* The floor a fingertip needs. Applied under (pointer: coarse), never under
       a width query: a laptop with a touchscreen has fingers on it, and a phone
       held sideways is wider than the mobile breakpoint. */
    --hg-touch: 44px;
}

/* ── Browser surfaces ──
   The parts nobody draws still carry the design, and they ship with defaults
   that belong to no design system. Global on purpose: they are as true of the
   chat and the admin area as of anything new. */

::selection {
    background: var(--hg-primary-ring);
    color: var(--hg-text);
}

:root {
    /* The flash Android and iOS paint over a tapped control, in a blue nobody
       here chose. It is the most-seen unstyled surface on a phone. */
    -webkit-tap-highlight-color: var(--hg-primary-ring);

    caret-color: var(--hg-primary);
    accent-color: var(--hg-primary);
    scrollbar-color: var(--hg-border) transparent;
    scrollbar-width: thin;
}

:where(a, button, [tabindex], input, textarea, select):focus-visible {
    outline: 2px solid var(--hg-primary);
    outline-offset: 2px;
    border-radius: var(--hg-r-xs);
}