/* =============================================================================
   Ankomst design tokens — generated from DESIGN.md ("Stripi-Inspired-design-analysis").

   The C# half of these same tokens lives in Ankomst.Contracts/Design/AnkomstDesign.cs
   and feeds the MudTheme; this file carries what a MudTheme cannot express —
   font-feature settings, per-role letter-spacing, pill button geometry, hairline
   borders. Both are generated from DESIGN.md; keep them in sync by hand.

   This file is byte-identical in Ankomst.AdminWeb and Ankomst.KioskWeb. The two apps
   are separate ASP.NET Core processes served on different origins with no shared
   static-asset mechanism, and ADR-003 explicitly rules out introducing a build
   pipeline to deduplicate it. Edit both, or neither.
   ============================================================================= */

/* --- Inter: DESIGN.md's own prescribed open-source substitute for the proprietary
   Sohne. Self-hosted rather than Google-Fonts-linked — kiosks may be offline or
   egress-filtered, and these pages render visitor PII. Variable font, 300..700, so a
   single file covers every weight the design uses (300 display/body, 400 buttons). --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext covers the Nordic, Central-European and Romance characters the kiosk's six
   shipped languages need (Norwegian, Swedish, French, Spanish, Italian, English). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand & accent */
    --ank-primary: #533afd;
    --ank-primary-deep: #4434d4;
    --ank-primary-press: #2e2b8c;
    --ank-primary-soft: #665efd;
    --ank-primary-subdued: #b9b9f9;
    --ank-brand-dark-900: #1c1e54;

    /* Text */
    --ank-ink: #0d253d;
    --ank-ink-secondary: #273951;
    --ank-ink-mute: #64748d;
    --ank-ink-mute-2: #61718a;
    --ank-on-primary: #ffffff;

    /* Surface */
    --ank-canvas: #ffffff;
    --ank-canvas-soft: #f6f9fc;
    --ank-canvas-cream: #f5e9d4;
    --ank-hairline: #e3e8ee;
    --ank-hairline-input: #a8c3de;

    /* Accents — gradient-mesh stops. Present for completeness; ruby is the only one
       used in the apps (as the error color), since neither app has marketing surfaces. */
    --ank-ruby: #ea2261;
    --ank-magenta: #f96bee;
    --ank-lemon: #9b6829;

    /* Radius */
    --ank-radius-xs: 4px;
    --ank-radius-sm: 6px;
    --ank-radius-md: 8px;
    --ank-radius-lg: 12px;
    --ank-radius-xl: 16px;
    --ank-radius-pill: 9999px;

    /* Spacing */
    --ank-space-xxs: 2px;
    --ank-space-xs: 4px;
    --ank-space-sm: 8px;
    --ank-space-md: 12px;
    --ank-space-lg: 16px;
    --ank-space-xl: 24px;
    --ank-space-xxl: 32px;
    --ank-space-huge: 64px;

    /* Elevation — DESIGN.md's shadows are tinted with shadow-blue #003770 rather than
       neutral black, which is what keeps lifted surfaces reading as part of the blue
       brand rather than generically greyed.

       Level 1 bumped up twice — kept in sync with Ankomst.AdminWeb's own copy of this
       file per this file's own header comment; see that copy's comment for the human
       report ("still too subtle") that drove both bumps. */
    --ank-elevation-1: rgba(0, 55, 112, 0.18) 0 2px 8px, rgba(0, 55, 112, 0.10) 0 1px 3px;
    --ank-elevation-2: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;
}

/* --- Global type baseline ------------------------------------------------------
   DESIGN.md: "Apply font-feature-settings: 'ss01' to the body element so the
   stylistic-set substitution is on for every text role." ss01 is a Sohne feature that
   Inter also implements (its alternate single-story characters), so this carries over
   to the substitute font rather than being inert. */
html, body {
    font-family: 'Inter', sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif;
    font-feature-settings: "ss01";
    color: var(--ank-ink);
}

/* --- Tabular figures -----------------------------------------------------------
   DESIGN.md: "Any cell rendering currency, transaction amounts, or numeric counts uses
   font-feature-settings: 'tnum' plus a tightening tracking."

   Ankomst has no currency, but it does have the equivalent: counts, timestamps, and
   ID-like strings in dense tables, where proportional digits make columns visibly
   ragged. Applied to every table cell rather than hand-tagged per column — in an admin
   portal essentially every table carries numerics somewhere, and a cell of prose is
   unharmed by tabular figures. `.ank-tnum` is the opt-in for numerics outside tables. */
.mud-table-cell,
.ank-tnum {
    font-feature-settings: "tnum";
    letter-spacing: -0.42px;
}

/* --- Buttons -------------------------------------------------------------------
   DESIGN.md: pill geometry (9999px) with tight 8px 16px padding, and NOT uppercase —
   MudBlazor's Material default uppercases button labels, which the brand does not do.
   Text-transform is also set on the theme's Button typography; this covers the
   icon-button and variant cases the typography role does not reach. */
.mud-button-root {
    border-radius: var(--ank-radius-pill);
    text-transform: none;
}

.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined,
.mud-button-root.mud-button-text {
    padding: var(--ank-space-sm) var(--ank-space-lg);
}

/* Touch targets — DESIGN.md "Touch Targets": pill buttons hit >= 40x40px, sizing up to
   44x44 on small screens. Padding alone does not guarantee this once a short label
   like "OK" is inside, so a min-height floor is set explicitly. */
.mud-button-root {
    min-height: 40px;
}

@media (max-width: 767px) {
    .mud-button-root {
        min-height: 44px;
    }
}

.mud-button-root.mud-button-filled:active {
    background-color: var(--ank-primary-press);
}

/* Icon buttons stay circular — a pill radius on a square icon button already resolves
   to a circle, but MudBlazor sets its own radius, so this keeps them consistent. */
.mud-icon-button {
    border-radius: var(--ank-radius-pill);
}

/* --- Inputs --------------------------------------------------------------------
   DESIGN.md text-input: 6px radius, 1px hairline-input border, border swaps to primary
   on focus. */
.mud-input-outlined-border {
    border-radius: var(--ank-radius-sm);
    border-color: var(--ank-hairline-input);
}

.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--ank-primary);
}

.mud-input-root {
    min-height: 40px;
}

/* --- Cards & surfaces ----------------------------------------------------------
   DESIGN.md card-feature-light: 12px radius, 1px hairline border, optional Level 1
   shadow. The doc's own "optional" shadow was left off at first (flat-bordered is the
   brand's stated default on white) — but a #e3e8ee hairline on a #ffffff canvas is only
   about a 1.04:1 contrast ratio, close to invisible in practice, not just in theory (a
   human report on Ankomst.AdminWeb's own copy of this file: "the ring around the
   boxes... is blending a bit too much" — kept in sync here per this file's own header
   comment, since KioskWeb renders the identical MudPaper card pattern). Taking
   DESIGN.md's "optional Level 1 shadow" instead of darkening the hairline itself —
   keeps the flat-card look at a glance while actually separating cards from the page.

   The shadow itself is set via KioskThemeState.cs's MudTheme.Shadows, not here — same
   move as AdminWeb's AnkomstTheme.cs, kept in sync per this file's own header comment.
   MudBlazor 7.15.0's own `.mud-elevation-N` classes read `var(--mud-elevation-N)`, which
   MudThemeProvider generates FROM Theme.Shadows.Elevation, so that's the framework's
   real hook for this — not a CSS override standing in for one. */
.mud-paper {
    border-radius: var(--ank-radius-lg);
}

.mud-paper-outlined {
    border-color: var(--ank-hairline);
}

/* --- Dialogs -------------------------------------------------------------------
   Level 2 is DESIGN.md's "floating panels" treatment. Unlike .mud-paper/.mud-elevation-N
   above, MudDialog's box-shadow is NOT theme-hookable in MudBlazor 7.15.0 — confirmed
   against its shipped CSS: `.mud-dialog`'s box-shadow is a literal hardcoded value, not
   a `var(--mud-elevation-N)` reference, so there is no Theme.Shadows entry that reaches
   it. This override is a genuine exception forced by the framework's own CSS in this
   version, not a substitute for a hook that exists and went unused. */
.mud-dialog {
    border-radius: var(--ank-radius-lg);
    box-shadow: var(--ank-elevation-2);
}

/* --- Chips / tags --------------------------------------------------------------
   DESIGN.md pill-tag-soft: primary-subdued background, micro-cap type, pill radius.

   DEVIATION, deliberate and accessibility-driven: DESIGN.md pairs text
   `primary-deep` #4434d4 on `primary-subdued` #b9b9f9, which measures 4.23:1 — below
   WCAG AA's 4.5:1, and this role renders at 10px where the large-text exemption does
   not apply. Swapped to `primary-press` #2e2b8c, which is already a DESIGN.md token
   (no new color invented) and measures 6.18:1 on the same background. */
.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--ank-primary-subdued);
    color: var(--ank-primary-press);
    border-radius: var(--ank-radius-pill);
}

.mud-chip {
    border-radius: var(--ank-radius-pill);
}

/* --- Links ---------------------------------------------------------------------
   DESIGN.md link-on-light: primary, no underline by default. */
.mud-link {
    color: var(--ank-primary);
    text-decoration: none;
}

.mud-link:hover {
    text-decoration: underline;
}

/* --- Alerts --------------------------------------------------------------------
   8px radius per DESIGN.md's "compact cards, alerts" note on rounded.md. */
.mud-alert {
    border-radius: var(--ank-radius-md);
}