/* ═══════════════════════════════════════════════════════════════════════════
   Lucpac brand tokens — the one place colour, type and radius are defined.

   Linked by every host BEFORE its own app.css:
     Lucpac.App/wwwroot/index.html            <link rel="stylesheet" href="_content/LP.UI.Shared/css/lucpac-tokens.css" />
     Lucpac.AdminApp/UIInfrastructure/App.razor  <link rel="stylesheet" href="@Assets["_content/LP.UI.Shared/css/lucpac-tokens.css"]" />
     Lucpac.TenantAdminApp/Components/App.razor  same as AdminApp

   The hosts' legacy --base-* / --accent-clr variables are re-pointed at these, so the shared layout
   components (NavMenu, status bar, Footer, CopyrightBanner, UserAvatarMenu) take the brand without
   being edited. New styles should read --lucpac-* directly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Type. Lexend is the wordmark face and carries headings; Barlow carries everything else. Both are
   self-hosted from LP.UI.Shared/wwwroot/fonts (latin subset, woff2). */
@font-face {
    font-family: "Lexend";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/lexend-600.woff2") format("woff2");
}
@font-face {
    font-family: "Lexend";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/lexend-700.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/barlow-500.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/barlow-600.woff2") format("woff2");
}

:root {
    /* ── Palette ── */
    --lucpac-navy: #102E6A;          /* logo, primary actions, headings, chrome */
    --lucpac-navy-deep: #0B1B3F;     /* hover / pressed on navy, nav band */
    --lucpac-navy-tint: #17367A;     /* hover row on navy, watermark */
    --lucpac-night: #0E1424;         /* dark-mode ground, dark popups */
    --lucpac-sky: #8FA6D1;           /* accent and primary on dark, stripes on navy */
    --lucpac-sky-tint: #DCE5F4;      /* selected rows, focus ring, subtle fills */
    --lucpac-ink: #14171F;           /* body text */
    --lucpac-text-muted: #5A6273;
    --lucpac-paper: #FFFFFF;
    --lucpac-mist: #F2F4F8;          /* app ground */
    --lucpac-line: #DDE2EB;          /* hairlines, borders */
    --lucpac-line-soft: #EEF1F5;     /* row hairlines inside a grid */
    --lucpac-row-stripe: #F4F7FC;    /* every other grid row: a navy tint, not Kendo's grey */
    --lucpac-hover: #E8EEF8;         /* hovered grid row - a step above the stripe, below the selection */
    --lucpac-mist-soft: #F7F8FB;     /* grid grouping strip, filter row, group footer */
    --lucpac-control-border: #C9D1DE;        /* outlined buttons, inputs and chips */
    --lucpac-control-border-hover: #B4C5E4;
    --lucpac-on-navy: #FFFFFF;       /* text on navy / night */
    --lucpac-on-navy-muted: #A9B4CC;
    --lucpac-danger: #B42318;
    --lucpac-danger-bg: #FDECEA;
    --lucpac-danger-border: #F2B8B0;
    --lucpac-success: #1E7F4F;
    --lucpac-warning: #B7791F;

    /* ── Type, shape, focus ── */
    --lucpac-font-display: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
    --lucpac-font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
    --lucpac-radius: 4px;
    --lucpac-focus-ring: 0 0 0 3px var(--lucpac-sky-tint);

    /* ── Telerik / Kendo Default theme → brand. Kendo themes v7+ read these variables; on an older
       theme build a custom theme in ThemeBuilder with the same values instead. ── */
    --kendo-color-primary: #102E6A;
    --kendo-color-primary-hover: #0B1B3F;
    --kendo-color-primary-active: #0B1B3F;
    --kendo-color-primary-emphasis: #8FA6D1;
    --kendo-color-primary-subtle: #DCE5F4;
    --kendo-color-primary-subtle-hover: #C9D6EC;
    --kendo-color-primary-subtle-active: #B4C5E4;
    --kendo-color-primary-on-subtle: #0B1B3F;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-font-family: var(--lucpac-font-body);
    --kendo-border-radius-md: 4px;
    --kendo-border-radius-lg: 4px;
}

/* Keyboard focus is themed, never the browser default. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--lucpac-navy);
    outline-offset: 2px;
}
::selection { background: var(--lucpac-sky-tint); color: var(--lucpac-ink); }