/* Cascade layer `tokens` (UX-361) — design tokens: custom properties only. Layer order: App.razor <head>.
   Everything in this file sits inside this block; see the end of the file. */
@layer tokens {

/* =========================================================
   UNIGATE — canonical design tokens (single source of truth)
   Light values live on :root, dark values on html[data-theme="dark"].
   core-* (core.css) and uni-* (app.css) variables are redirected to
   these --ds-* tokens, so flipping data-theme re-themes everything.
   Loaded FIRST in App.razor <head>.

   UX-368 — the MudBlazor palette (Unigate.Presentation.Shared/Theming/UnigateTheme.cs) is the second
   copy of these colours: MudBlazor derives its darken/lighten/hover shades in C#, so it cannot read
   them from here. Nothing checks the two automatically: when you change a shared colour (primary,
   secondary/neutral, tertiary, success, info, warning, error, text, background, surface, lines…) in
   either theme, change it here AND in UnigateTheme.cs.
   ========================================================= */

:root {
    color-scheme: light;

    /* brand
       UX-340: was #0472ff — white on it 4.32:1 and, as text, 3.82–4.32:1 on the light surfaces (WCAG AA
       needs 4.5:1). #0062df (= PaletteLight.Primary): white on fill 5.51, as text 5.51 white / 5.09 bg /
       5.23 surface-2 / 4.86 inset / 4.83 primary-soft. Hover #0355bd: 6.91 with white. */
    --ds-primary: #0062df;
    --ds-primary-hover: #0355bd;
    --ds-primary-strong: #0355bd; /* accessible brand-blue text / icons on a light surface */
    --ds-primary-contrast: #ffffff; /* text on a primary fill */
    --ds-primary-soft: #e7f1ff; /* tinted background behind icons / chips */
    --ds-primary-softer: #f4f8ff;
    /* UX-352 — one meaning per colour: orange (accent) is the BRAND only; warning is amber (--ds-warning*);
       archived / inactive / «secondary» status is grey (--ds-neutral*). Nothing semantic may use the accent. */
    --ds-accent: #f15927;
    --ds-accent-strong: #a93710; /* UX-341: was #bd3e14 (4.77 on a selected row); 5.83 on accent-soft, 6.48 white */
    --ds-accent-soft: #fff0ea;
    /* DEPRECATED alias (UX-352) — kept only for the Razor consumers that still name it (Home.razor dashboard
       Quality module, Home.razor.css .dashboard-kpi-card.is-secondary, MyNotificationsPanel Approval). It is the
       brand orange, never a status colour; new code uses --ds-accent (brand) or --ds-neutral (archived/inactive). */
    --ds-secondary: var(--ds-accent);
    --ds-secondary-soft: var(--ds-accent-soft);

    /* surfaces */
    --ds-bg: #f4f6f9;
    --ds-surface: #ffffff;
    --ds-surface-2: #f8f9fb; /* table header / subtle strips */
    --ds-surface-inset: #eef1f5; /* inputs / wells */
    --ds-surface-hover: #f2f6fc; /* row hover */
    --ds-surface-selected: #e7f1ff;
    --ds-overlay: rgba(14, 23, 43, .42); /* dialog scrim */

    /* text */
    --ds-text: #121820;
    --ds-text-2: #344052;
    --ds-text-3: #4b586b;
    /* Grey text ladder (UX-368): text-3 > muted > faint, each a visible step and every one ≥ 4.5:1 (WCAG AA).
       muted and faint used to be #626f82 / #626e80 — one colour under two names, and muted fell to 4.48:1 on a
       selected row. faint stays the lightest grey that still passes on every light surface; muted moves a
       step darker (= PaletteLight.TextSecondary).
                          white  bg    surf-2  inset  hover  selected
         text-3 #4b586b   7.22   6.67  6.86    6.38   6.66   6.34
         muted  #56637a   6.07   5.60  5.76    5.35   5.59   5.32
         faint  #626e80   5.17   4.78  4.91    4.56   4.77   4.54   <- limit (#636f81 is 4.498 on inset) */
    --ds-muted: #56637a;
    --ds-faint: #626e80;

    /* lines */
    --ds-border: #d9dee7;
    --ds-border-soft: #e9ecf1;
    --ds-border-strong: #c6cdd8;

    /* state
       *-strong = the same hue dark enough to be TEXT (UX-341): on its own *-soft, on white and on a
       selected row (#e7f1ff) it stays ≥ 4.5:1. The base colours are fills/icons only — as text on white
       success is 3.30, warning 2.15, secondary 3.39.
         success-strong #147638  soft 5.16 / white 5.71 / row-hover 5.26 / selected 5.01
         info-strong    #1d4ed8  soft 5.81 / white 6.70 / row-hover 6.18 / selected 5.88
         warning-strong #a44b08  soft 5.37 / white 5.85 / row-hover 5.40 / selected 5.13 (was #b45309: 4.41 on selected)
         error-strong   #b91c1c  soft 5.59 / white 6.47 / row-hover 5.97 / selected 5.68 */
    --ds-success: #16a34a;
    --ds-success-strong: #147638;
    --ds-success-soft: #e8f7ee;
    --ds-info: #2563eb;
    --ds-info-strong: #1d4ed8;
    --ds-info-soft: #e8effe;
    --ds-warning: #f59e0b;
    /* نارنجیِ پایه روی سفید ۲٫۱:۱ است؛ برای متن، این یکی — UX-049، UX-341. */
    --ds-warning-strong: #a44b08;
    --ds-warning-soft: #fef4e3;
    --ds-error: #dc2626;
    --ds-error-strong: #b91c1c;
    --ds-error-soft: #fdeaea;
    /* UX-352 — neutral = archived / inactive / «secondary» status (was the brand orange).
         neutral        #626f82  fill / icon; white on it 5.10
         neutral-strong #4b586b  text: soft 6.38 / white 7.22 / row-hover 6.66 / selected 6.34 */
    --ds-neutral: #626f82;
    --ds-neutral-strong: #4b586b;
    --ds-neutral-soft: #eef1f5;

    /* elevation */
    --ds-shadow-sm: 0 1px 3px rgba(18, 24, 32, .07);
    --ds-shadow: 0 4px 14px rgba(18, 24, 32, .08);
    /* UX-353: popovers we draw ourselves (grid column menu, notification panel) named --ds-shadow-md, which was
       never defined — an undefined var() voids the whole box-shadow, so they had none. */
    --ds-shadow-md: 0 6px 20px rgba(18, 24, 32, .10);
    --ds-shadow-lg: 0 10px 30px rgba(18, 24, 32, .12);
    /* UX-367: shadow cast UPWARD — a bar pinned to the bottom of a scrolling box (sticky dialog actions). */
    --ds-shadow-up: 0 -10px 24px rgba(18, 24, 32, .04);
    --ds-shadow-primary: 0 6px 18px rgba(0, 98, 223, .22);
    /* «نرم»: سایه دولایه با پخشِ بلند و تیرگیِ کم — لبه‌ای سخت نمی‌سازد. */
    --ds-shadow-soft: 0 1px 2px rgba(18, 24, 32, .04), 0 10px 28px -14px rgba(18, 24, 32, .22);
    --ds-shadow-soft-lg: 0 2px 8px rgba(18, 24, 32, .07), 0 22px 44px -18px rgba(18, 24, 32, .30);

    /* radii */
    --ds-radius-sm: 8px;
    --ds-radius: 10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 20px;
    --ds-radius-pill: 999px;

    /* control heights (UX-363) — the one height of a text field, select, autocomplete or date field
       (app.css, core.css .core-input), and the compact one for controls inside a data grid (column filter
       row, pager rows-per-page select) and other dense strips (calendar month/year). A container that
       needs compact controls sets `--ds-control-h: var(--ds-control-h-sm)` instead of new heights.
       (Was 38px in the filter card, 46px elsewhere — even in a Dense field — and 44px on some buttons.) */
    --ds-control-h: 40px;
    --ds-control-h-sm: 32px;

    /* motion */
    --ds-ease: cubic-bezier(.4, 0, .2, 1);
    --ds-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ds-dur-fast: .14s;
    --ds-dur: .22s;
    --ds-dur-slow: .36s;
}

/* UX-366: screen only — paper is always printed with the light tokens, even on print paths that do not fire
   beforeprint (theme.js flips data-theme there for normal Ctrl+P). */
@media screen {
html[data-theme="dark"] {
    color-scheme: dark;

    /* brand
       UX-340: #0472ff as text was 4.04:1 on --ds-surface and 3.48:1 on --ds-surface-hover. A blue light
       enough to pass as text on these surfaces cannot also carry white text, so dark mode puts dark ink on
       primary fills (= PaletteDark.Primary / PrimaryContrastText): #4d94ff as text 6.30 bg / 5.82 surface /
       5.45 surface-2 / 6.10 inset / 5.01 surface-hover; #0d1117 on #4d94ff 6.30, on hover #6aa6ff 7.67.
       The rgba(4, 114, 255, …) tints below stay: they are backgrounds, and light text keeps ≥11:1 on them. */
    --ds-primary: #4d94ff;
    --ds-primary-hover: #6aa6ff;
    --ds-primary-strong: #8fc1ff; /* brand-blue text / icons on a dark surface */
    --ds-primary-contrast: #0d1117; /* text on a primary fill */
    --ds-primary-soft: rgba(4, 114, 255, .18);
    --ds-primary-softer: rgba(4, 114, 255, .10);
    --ds-accent: #f15927;
    --ds-accent-strong: #ff9a78;
    --ds-accent-soft: rgba(241, 89, 39, .16);
    --ds-secondary: var(--ds-accent); /* DEPRECATED alias, see the light block (UX-352) */
    --ds-secondary-soft: var(--ds-accent-soft);

    /* surfaces */
    --ds-bg: #0d1117;
    --ds-surface: #151a21;
    --ds-surface-2: #1a2029;
    --ds-surface-inset: #10151c;
    --ds-surface-hover: #202731;
    --ds-surface-selected: rgba(4, 114, 255, .20);
    --ds-overlay: rgba(4, 7, 11, .68);

    /* text */
    --ds-text: #f0f3f7;
    --ds-text-2: #c9d0da;
    --ds-text-3: #abb5c2;
    /* Grey text ladder (UX-368), as in the light block: muted a clear step brighter than faint
       (= PaletteDark.TextSecondary; was #8f9baa, only 0.7 above faint on the surface).
                          bg    surface  surf-2  inset  hover
         text-3 #abb5c2   9.12  8.42     7.89    8.83   7.25
         muted  #9aa5b3   7.58  7.00     6.55    7.34   6.02
         faint  #8591a1   5.91  5.46     5.12    5.73   4.70   <- limit (UI-SHR-029: was #6f7b8a, 3.49 on hover) */
    --ds-muted: #9aa5b3;
    --ds-faint: #8591a1;

    /* lines */
    --ds-border: #2b333e;
    --ds-border-soft: #222933;
    --ds-border-strong: #3a4451;

    /* state
       *-strong = light text of the same hue on its dark-tinted *-soft (UX-341). Ratios on the soft tint
       composited over bg / surface / surface-hover:
         success-strong #6ee7b7  9.27 / 8.30 / 7.05
         info-strong    #93c5fd  8.18 / 7.41 / 6.32
         warning-strong #fbbf24  8.22 / 7.43 / 6.32
         error-strong   #fca5a5  8.05 / 7.29 / 6.23
       (white on the old filled chips was 1.92 success, 1.67 warning, 2.77 error, 2.54 info). */
    --ds-success: #34d399;
    --ds-success-strong: #6ee7b7;
    --ds-success-soft: rgba(52, 211, 153, .16);
    --ds-info: #60a5fa;
    --ds-info-strong: #93c5fd;
    --ds-info-soft: rgba(96, 165, 250, .16);
    --ds-warning: #fbbf24;
    --ds-warning-strong: #fbbf24;
    --ds-warning-soft: rgba(251, 191, 36, .16);
    --ds-error: #f87171;
    --ds-error-strong: #fca5a5;
    --ds-error-soft: rgba(248, 113, 113, .16);
    /* neutral-strong #c9d0da on the soft tint over bg / surface / surface-hover: 9.66 / 8.73 / 7.45 (UX-352) */
    --ds-neutral: #8f9baa;
    --ds-neutral-strong: #c9d0da;
    --ds-neutral-soft: rgba(143, 155, 170, .16);

    /* elevation */
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, .34);
    --ds-shadow: 0 5px 16px rgba(0, 0, 0, .38);
    --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, .44); /* UX-353 */
    --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, .48);
    --ds-shadow-up: 0 -10px 24px rgba(0, 0, 0, .30); /* UX-367 */
    --ds-shadow-primary: 0 6px 20px rgba(4, 114, 255, .28);
    --ds-shadow-soft: 0 1px 2px rgba(0, 0, 0, .40), 0 12px 30px -14px rgba(0, 0, 0, .62);
    --ds-shadow-soft-lg: 0 2px 10px rgba(0, 0, 0, .50), 0 24px 48px -18px rgba(0, 0, 0, .74);
}
} /* end @media screen */

} /* end @layer tokens */