/* ─────────────────────────────────────────────────────────────────────────────
   PlatinumWCA — design tokens.

   The palette, radius, type and elevation here are PlatinumPOS's, ported value
   for value from `PlatinumPOS/Theme/PlatinumPOSTheme.cs` and
   `PlatinumPOS/wwwroot/app.css` so the two products read as one system. Where
   POS states a value, that value is used unchanged and the POS name is noted
   beside it; nothing here is a reinterpretation.

   POS is a MudBlazor app and gets these as a MudTheme. PlatinumWCA has no
   component framework, so the same values live as custom properties and the
   component layer applies them by hand. The names are WCA's own, but every
   colour below traces to a POS line.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* ── Surfaces ──────────────────────────────────────────────────────────
       Tailwind's Slate ramp, which is what POS's palette is built from. */
    --stock:        #FFFFFF;   /* POS Surface — pure white cards */
    --stock-raised: #FFFFFF;   /* POS Surface */
    --bench:        #F8FAFC;   /* POS Background — very light cool grey */
    --bench-deep:   #F1F5F9;   /* POS BackgroundGray */

    /* ── Ink ───────────────────────────────────────────────────────────────── */
    --ink:    #0F172A;   /* POS TextPrimary — Slate 900 */
    --ink-2:  #475569;   /* POS TextSecondary — Slate 600 */
    --ink-3:  #64748B;   /* Slate 500. POS uses #94A3B8 for TextDisabled, which
                            is 2.6:1 on white; that is fine for a genuinely
                            disabled control but not for the secondary text this
                            app puts real content in, so the ramp stops one step
                            earlier here. */
    --ink-disabled: #94A3B8;   /* POS TextDisabled — disabled controls only */

    /* ── Lines ─────────────────────────────────────────────────────────────
       POS draws structure with soft borders and no shadow. */
    --rule:      #E2E8F0;   /* POS LinesDefault / Divider */
    --rule-soft: #F1F5F9;   /* POS BackgroundGray, used as the faintest rule */
    --rule-ink:  #CBD5E1;   /* POS LinesInputs — the border a control gets */

    /* ── Primary ───────────────────────────────────────────────────────────── */
    --spot:        #2563EB;   /* POS Primary — crisp modern blue */
    --spot-lift:   #1D4ED8;   /* POS PrimaryDarken */
    --spot-light:  #3B82F6;   /* POS PrimaryLighten */
    /* POS uses PrimaryLighten as the active nav-link background. At full
       strength that is a mid blue behind primary-blue text, so the tint below
       is the same hue mixed down to the wash POS actually renders. */
    --spot-wash:   #EFF6FF;
    --on-spot:     #FFFFFF;

    /* ── Status ────────────────────────────────────────────────────────────── */
    /* Three greens, three jobs. Emerald is a light hue, so one value cannot do
       all of this: #10B981 is only 2.32:1 against a light track, which is a
       volume bar that washes out in daylight — the exact condition this product
       is used in. Measured, not guessed. */
    --ok:        #10B981;   /* POS Success / Tertiary — chips, washes, tints */
    --ok-fill:   #059669;   /* POS SuccessDarken — a filled shape that has to
                              clear 3:1 against a light track (3.44:1) */
    --ok-strong: #047857;   /* Emerald 700 — TEXT. POS's SuccessDarken is 3.6:1
                              on the wash and 3.8:1 on white, so it cannot carry
                              12px type; one step darker clears both. */
    --ok-wash:   #ECFDF5;

    --warn:        #F59E0B;   /* POS Warning */
    --warn-strong: #B45309;   /* Amber 700 — the same warning as text */
    --warn-wash:   #FFFBEB;

    --stop:        #EF4444;   /* POS Error */
    --stop-strong: #B91C1C;   /* Red 700. Red 600 lands at 4.41:1 on the wash,
                                just under the floor. */
    --stop-wash:   #FEF2F2;

    --note:        #0EA5E9;   /* POS Info */
    --note-strong: #0369A1;   /* Sky 700 — the same info as text */
    --note-wash:   #F0F9FF;

    --slate:       #475569;   /* POS Secondary */

    /* ── Type ──────────────────────────────────────────────────────────────
       POS names Inter first and falls back to the system stack. WCA self-hosts
       it: this is an offline-first PWA, and a font that needs the network is a
       font that is missing in the field. */
    --face-text: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
    /* Figures and codes. One face for the whole app, and this is why it is not
       a monospace: only Inter is self-hosted, so a mono stack fell through to
       whatever each device happened to have - SF Mono on an iPhone, Roboto Mono
       on Android, Consolas on Windows. The app rendered its numbers in a
       different font on every handset it ran on.

       Inter's own tabular numerals do the job the mono was there for: with
       font-variant-numeric: tabular-nums every digit measures exactly the same
       width, so a column of masses still aligns on the decimal. Measured, not
       assumed - 12.969px for all ten digits at 20px.

       Kept as a separate token because the intent differs: this is the face for
       a quantity, and it is still the place to change if a figure face is ever
       wanted again. It must then be self-hosted like Inter, or the same
       inconsistency comes straight back. */
    --face-value: var(--face-text);

    /* POS sets Default to 0.9rem and overrides only WEIGHT, TRACKING and FAMILY
       on H3-H6 - their sizes are MudBlazor's own defaults, so those are the
       sizes used here. An earlier pass invented a compressed heading ramp
       (h6 1.05rem against a 1rem body) whose steps were 1.05 apart and read as
       one size; MudBlazor's is both wider-stepped and truer to the brief. */
    --t-fine:    0.75rem;     /* 12px — MudBlazor caption */
    --t-small:   0.8125rem;   /* 13px */
    --t-body:    0.9rem;      /* 14.4px — POS Default */
    --t-body-lg: 1rem;        /* 16px — MudBlazor Body1 */
    --t-h6:      1.25rem;     /* 20px — MudBlazor H6 */
    --t-h5:      1.5rem;      /* 24px — MudBlazor H5 */
    --t-h4:      2.125rem;    /* 34px — MudBlazor H4 */
    --t-h3:      3rem;        /* 48px — MudBlazor H3 */
    --t-h2:      3.75rem;
    --t-plate:   2.125rem;

    --lh-tight: 1.2;
    --lh-snug:  1.35;
    --lh-body:  1.5;          /* POS Default LineHeight */

    /* POS heading tracking: H3 -0.02em, H4/H5/H6 -0.01em. */
    --track-h3: -0.02em;
    --track-h:  -0.01em;

    /* ── Measure ───────────────────────────────────────────────────────────── */
    --measure-tape:  34rem;
    --measure-bench: 84rem;
    --measure-prose: 68ch;

    /* ── Space. 4px base. ──────────────────────────────────────────────────── */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
    --s-12: 3rem;    --s-16: 4rem;

    /* ── Radius ────────────────────────────────────────────────────────────
       POS: DefaultBorderRadius 12px, panels and tiles 24px, dialogs 28px, nav
       links a 100px pill. */
    --r-sm:   8px;
    --r-md:   12px;   /* POS DefaultBorderRadius */
    --r-lg:   24px;   /* POS .rw-activity-card / .w8-tile / .pos-cart-panel */
    --r-xl:   28px;   /* POS .mud-dialog */
    --r-pill: 100px;  /* POS .mud-nav-link */

    /* ── Elevation ─────────────────────────────────────────────────────────
       POS cards carry a border and NO shadow (`box-shadow: none !important` on
       .rw-activity-card). Shadow is reserved for things that genuinely float. */
    --lift-0: none;
    --lift-1: 0 1px 2px rgba(15, 23, 42, .04);
    --lift-2: 0 4px 12px rgba(15, 23, 42, .05);
    /* POS .mud-dialog, verbatim. */
    --lift-3: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
    /* POS .w8-tile:hover / :active. */
    --lift-hover: 0 12px 24px rgba(0,0,0,.08);
    --lift-press: 0 4px 12px rgba(0,0,0,.05);

    /* ── Motion ────────────────────────────────────────────────────────────
       POS transitions are 0.15-0.2s ease. */
    --ease:  ease;
    --dur-1: 150ms;
    --dur-2: 200ms;
    --dur-3: 260ms;

    /* ── Z scale. Semantic, never a 9999 one-off. ──────────────────────────── */
    --z-sticky: 1100;
    --z-scrim:  1200;
    --z-modal:  1300;
    --z-toast:  1400;
    --z-tip:    1500;

    /* Touch: a gloved thumb over a sorting table. */
    --hit: 44px;
    --hit-lg: 48px;
}

/* ── Dark ────────────────────────────────────────────────────────────────────
   POS's PaletteDark, ported the same way. Slate 900 ground, Slate 800 surface. */
[data-theme="dark"] {
    color-scheme: dark;

    --stock:        #1E293B;   /* POS Surface */
    --stock-raised: #1E293B;   /* POS Surface / BackgroundGray */
    --bench:        #0F172A;   /* POS Background — Slate 900 */
    --bench-deep:   #0B1220;

    --ink:          #F8FAFC;   /* POS TextPrimary */
    --ink-2:        #94A3B8;   /* POS TextSecondary */
    --ink-3:        #A8B4C4;   /* One step brighter than POS TextSecondary so
                                  small print still clears 4.5:1 on Slate 800. */
    --ink-disabled: #475569;   /* POS TextDisabled */

    --rule:      #334155;   /* POS LinesDefault / Divider */
    --rule-soft: #263449;
    --rule-ink:  #475569;   /* POS LinesInputs */

    --spot:       #3B82F6;   /* POS Primary (dark) */
    --spot-lift:  #60A5FA;   /* POS PrimaryLighten (dark) */
    --spot-light: #2563EB;   /* POS PrimaryDarken (dark) */
    --spot-wash:  #1E3A5F;
    --on-spot:    #0F172A;

    --ok:        #10B981;   /* POS Success (dark) */
    --ok-fill:   #34D399;   /* Lighter, not darker: the track is dark here */
    --ok-strong: #34D399;   /* POS Tertiary (dark) — legible on Slate 800 */
    --ok-wash:   #12312A;

    --warn:        #FBBF24;   /* POS Warning (dark) */
    --warn-strong: #FCD34D;
    --warn-wash:   #33280F;

    --stop:        #F87171;   /* POS Error (dark) */
    --stop-strong: #FCA5A5;
    --stop-wash:   #3B1D1D;

    --note:        #38BDF8;   /* POS Info (dark) */
    --note-strong: #7DD3FC;
    --note-wash:   #10293A;

    --slate:       #94A3B8;   /* POS Secondary (dark) */

    --lift-0: none;
    --lift-1: 0 1px 2px rgba(0, 0, 0, .30);
    --lift-2: 0 4px 12px rgba(0, 0, 0, .35);
    --lift-3: 0 24px 38px 3px rgba(0,0,0,0.44), 0 9px 46px 8px rgba(0,0,0,0.38), 0 11px 15px -7px rgba(0,0,0,0.5);
    --lift-hover: 0 12px 24px rgba(0,0,0,.40);
    --lift-press: 0 4px 12px rgba(0,0,0,.30);
}