@charset "UTF-8";

/*
 * logistic-theme.css — the token layer.
 *
 * Ported from cafe's `public/admin/css/cafe-theme.css`, which is the authoritative
 * expression of the shared design system (`cafe/docs/design-system.md` §2). The two
 * apps are meant to look like one product, so the palette, the type scale, the
 * spacing ramp and the focus ring are copied verbatim rather than re-derived.
 *
 * This file is VOCABULARY, not sentences: only @font-face and custom properties.
 * No component styles live here — those belong in logistic.css.
 *
 * ═══ No raw hex anywhere else ═══
 * Every colour in logistic.css reads var(--…). A new colour is a new token here,
 * never a hex in the consumer.
 *
 * ═══ Load order matters ═══
 * Linked BEFORE rtl.css in admin/includes/head.blade.php, and before style.css in
 * auth/layouts/includes/head.blade.php. Two reasons, and the second is a bug fix:
 * the variables have to exist before anything reads them, AND rtl.css sets
 * `font-family: "estedad"` in NINE places (lines 13, 44, 48, 82, 107, 122, 921,
 * 925, 1562) while no @font-face for that family existed anywhere in the app.
 * Headings therefore fell through to Tahoma while div/span/input got IranYekan
 * from the primary-iran-yekan @import at rtl.css:2 — body and headings were two
 * different typefaces. Defining the family here fixes all nine selectors without
 * editing one of them.
 *
 * 🚫 Do NOT edit those nine rules in rtl.css, and do not remove the
 * primary/secondary-iran-yekan @imports at rtl.css:2-3 — "primary-font" is still
 * a live fallback in the :48 and :122 stacks.
 *
 * ═══ Lalezar is deliberately absent ═══
 * cafe defines it for exactly one element: the receipt-number chip, its signature.
 * Its whole force comes from its rarity. Logistic has no receipt and no chip, so
 * shipping the @font-face here would be a dead download and an open invitation to
 * use a display face on a heading — which the design system forbids. If a genuine
 * single-purpose numeral ever appears (a purchase-request number as the subject of
 * its own page), add the face and the --font-display token together, for that one
 * element.
 */

/* ---------- Estedad: every piece of text. fa-num cut. ---------- */

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-300.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-300.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-300.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-400.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-400.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-500.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-500.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Estedad";
    src: url("../vendor/fonts/farsi-fonts-fa-num/estedad-700.woff2") format("woff2"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-700.woff") format("woff"),
         url("../vendor/fonts/farsi-fonts-fa-num/estedad-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
    /* Ink — the dark end. Logistic has no dark screens, but --ink-700 is the
       body text colour on light grounds and --ink-800/900 back the shadows and
       the one dark chip on the image uploader. */
    --ink-900: #0B141C;
    --ink-800: #101C28;
    --ink-700: #17293A;   /* text on light */
    --ink-600: #22394F;

    /* Brand — unchanged. #134D78 has always been the panel's primary; it is
       simply no longer hardcoded in three stylesheets. */
    --navy:    #134D78;
    --navy-d:  #0D3350;

    /* Brass — the accent. Used sparingly: focus rings, the one raised tile,
       the active tab underline. Never as a ground for text. */
    --brass:   #D3922F;
    --brass-l: #E8B45F;
    --brass-d: #A56E1E;

    /* Status */
    --jade:    #2E9E6B;   /* approved / done / in stock */
    --ember:   #D2452F;   /* rejected / danger / overdue */
    --amber:   #C8873F;   /* awaiting action */

    /* Ember for text on dark grounds: --ember measures only 3.80:1 on --ink-800
       and misses AA (4.5:1) for small text; this gives 5.43:1. Dark grounds only. */
    --ember-l: #E86A54;

    /* The sidebar. Its two colours came from rtl.css (#191F2F ground at :409,
       #3A3F4C item pill) and had no tokens; they are the same two values cafe
       renders, measured in its DOM: rgb(25,31,47) and rgb(58,63,76). Tokenised
       here so the sidebar reads from the same vocabulary as everything else. */
    --menu-ground: #191F2F;
    --menu-pill:   #3A3F4C;

    /* Light grounds — the whole back office */
    --paper:   #F1F3F6;   /* page ground */
    --surface: #FFFFFF;   /* card ground */
    --line:    #E3E8EF;   /* hairline */
    --muted:   #6B7C93;   /* secondary text, LARGE only */
    --muted-d: #8FA3BC;   /* secondary text on dark */

    /* Secondary text on light grounds. Measured: --muted is 3.83:1 on --paper and
       4.26:1 on --surface — both under AA for small text, and secondary text is
       always small. This gives 4.89:1 and 5.44:1. --muted stays defined because it
       is still correct at ≥19px/700 (the 3:1 large-text floor). */
    --muted-s: #5A6B82;

    /* Type. No --font-display: see the Lalezar note in the header. */
    --font-body: "Estedad";

    /* Spacing — 4px scale. Each token is named for its own value so it cannot lie. */
    --sp-4:  4px;
    --sp-8:  8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;

    /* Radius */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;

    /* Shadow — only two, both derived from --ink-900 rather than an arbitrary black. */
    --shadow-card: 0 1px 2px rgba(11, 20, 28, .06), 0 2px 8px rgba(11, 20, 28, .06);
    --shadow-lift: 0 4px 12px rgba(11, 20, 28, .10), 0 12px 28px rgba(11, 20, 28, .10);
}

/* ---------- Focus floor ----------
   :focus-visible, not :focus, so a mouse click never draws a ring.

   The colour is --brass-d, not --brass: measured, --brass is 2.38:1 on --paper and
   2.65:1 on --surface, under the 3:1 WCAG requires of non-text components (and a
   focus indicator is one). --brass-d gives 3.90 and 4.33. Light is the only ground
   this app has, so there is no dark override here — cafe's .kiosk-body block was
   dropped with the kiosk screens it belonged to. */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brass-d);
    outline-offset: 2px;
}