/* ============================================================================
   MirusPOS design tokens — "Ledger" base with a density switch.
   Served to both hosts as _content/ClientSharedLibrary/css/tokens.css.

   This is the single source of truth for colour, type, spacing and elevation.
   Segment work replaces per-component <style> blocks and inline styles with
   these variables; nothing here targets a component directly.

   TYPEFACE NOTE — deliberate choice, not an omission.
   The UI ships in 14 languages including Tamil, Hindi, Bengali, Gujarati,
   Kannada, Malayalam, Marathi, Arabic and Japanese. No practical webfont
   subset covers that set, and the app is offline-first (a CDN font would
   fail exactly when the counter loses network). So the stack is the
   platform's own UI face, which has full coverage on every target OS, costs
   nothing to load, and renders identically offline. Figures use tabular
   numerals so currency columns align.

   DENSITY — set data-density on <html> or any container:
     compact      till, kitchen — more rows per screen, tighter controls
     (default)    admin, catalogue, reports
     comfortable  customer-facing kiosk, self-checkout — large touch targets
   ========================================================================= */

:root {
  /* ---- Palette: light ---------------------------------------------------- */
  --mp-bg:            #F7F8FA;
  --mp-surface:       #FFFFFF;
  --mp-surface-2:     #EFF2F6;
  --mp-surface-sunk:  #E9EDF2;

  --mp-ink:           #171A21;
  --mp-ink-2:         #454D5C;
  /* Darkened from #6B7484 while verifying S9: on --mp-bg it measured 4.43:1,
     just under AA, which put every "Showing 1 to 10 of 2"-style caption in the
     app a hair below. #666E7C reads 4.84:1 on the page and 5.14:1 on a card. */
  --mp-muted:         #666E7C;
  --mp-line:          #E3E7ED;
  --mp-line-strong:   #CFD6E0;

  --mp-accent:        #24406E;
  --mp-accent-hover:  #1B3157;
  --mp-accent-ink:    #FFFFFF;
  --mp-accent-soft:   #E8EDF6;

  /* Semantic — kept separate from the accent on purpose */
  --mp-good:          #1F6B4A;
  --mp-good-soft:     #E4F2EB;
  --mp-warn:          #9A5B12;
  --mp-warn-soft:     #FBF0DF;
  --mp-danger:        #A32A25;
  --mp-danger-soft:   #FBE9E8;
  --mp-info:          #24406E;
  --mp-info-soft:     #E8EDF6;

  /* Ink for text sitting ON a solid semantic fill. These flip with the
     theme for the same reason --mp-accent-ink does: the semantic hues are
     picked to be readable AS text on the page ground, so the dark theme's
     --mp-good is a light green and white text on it is 2.25:1. */
  --mp-good-ink:      #FFFFFF;
  --mp-warn-ink:      #FFFFFF;
  --mp-danger-ink:    #FFFFFF;
  --mp-info-ink:      #FFFFFF;

  /* ---- Type -------------------------------------------------------------- */
  --mp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
             "Helvetica Neue", Arial, sans-serif;
  --mp-font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
                 "Roboto Mono", Menlo, Consolas, monospace;

  --mp-text-xs:   0.75rem;
  --mp-text-sm:   0.8125rem;
  --mp-text-base: 0.9375rem;
  --mp-text-md:   1rem;
  --mp-text-lg:   1.125rem;
  --mp-text-xl:   1.375rem;
  --mp-text-2xl:  1.75rem;

  --mp-weight-normal: 400;
  --mp-weight-medium: 500;
  --mp-weight-bold:   600;
  --mp-leading:       1.5;
  --mp-leading-tight: 1.25;
  --mp-track-label:   0.08em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 24px;
  --mp-space-6: 32px;
  --mp-space-7: 48px;

  /* ---- Radius & elevation ------------------------------------------------ */
  --mp-radius-sm:   6px;
  --mp-radius:      10px;
  --mp-radius-lg:   14px;
  --mp-radius-pill: 999px;

  --mp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --mp-shadow:    0 2px 6px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --mp-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  --mp-focus: 0 0 0 3px rgba(36, 64, 110, .32);

  /* Foreground for surfaces painted with the business's own brand colour
     (NavMenu applies it inline from _home.backgroundcolor). That colour is
     user-chosen and historically dark, so this stays a fixed light value in
     BOTH themes — deriving it from --mp-ink would put near-black text on a
     dark brand header in light mode. Matches the previous --nav-text. */
  --mp-brand:         #AB1385;  /* DefaultState.backgroundcolor: the brand surfaces' colour until the preference loads */
  --mp-on-brand:      rgba(255, 255, 255, .92);
  --mp-on-brand-dim:  rgba(255, 255, 255, .66);

  /* ---- Order-status ramp (added by S3) -----------------------------------
     Order state is the primary thing an operator scans for on the kitchen
     display and the online-orders board, so status is carried by hue, not by
     a label alone. Six states, each as a trio:

       --mp-st-<state>       the hue itself: rail, dot, chip text
       --mp-st-<state>-soft  tinted surface behind a chip or a card
       --mp-st-<state>-line  border that reads against that tint

     Hues are held at "Ledger" saturation — enough to separate six states at a
     glance, not the saturated gradients they replace. Every trio is restated
     in both dark blocks below; a state whose colour existed only in light mode
     would disappear from the board at night.
     ---------------------------------------------------------------------- */
  --mp-st-pending:        #8A5A00;
  --mp-st-pending-soft:   #FDF3DF;
  --mp-st-pending-line:   #E8C97A;

  --mp-st-confirmed:      #0F6B7A;
  --mp-st-confirmed-soft: #E1F2F5;
  --mp-st-confirmed-line: #8FC9D3;

  --mp-st-preparing:      #1E4FA8;
  --mp-st-preparing-soft: #E6EDFB;
  --mp-st-preparing-line: #A3BEEA;

  --mp-st-ready:          #1F6B4A;
  --mp-st-ready-soft:     #E4F2EB;
  --mp-st-ready-line:     #96C9B2;

  --mp-st-delivery:       #5B33A8;
  --mp-st-delivery-soft:  #EFE8FB;
  --mp-st-delivery-line:  #BFA6E8;

  --mp-st-cancelled:      #6B7484;
  --mp-st-cancelled-soft: #EFF2F6;
  --mp-st-cancelled-line: #CFD6E0;

  /* ---- Layout ------------------------------------------------------------ */
  --mp-sidebar-w:         272px;
  --mp-sidebar-w-tablet:  216px;
  --mp-topbar-h:          56px;
  --mp-z-nav:             1030;
  --mp-z-overlay:         1080;

  /* ---- Density: default -------------------------------------------------- */
  --mp-control-h:   40px;
  --mp-control-pad: 0 var(--mp-space-4);
  --mp-gap:         var(--mp-space-4);
  --mp-gap-tight:   var(--mp-space-2);
  --mp-pad-card:    var(--mp-space-5);
  --mp-text-ui:     var(--mp-text-base);
  --mp-row-h:       44px;
}

[data-density="compact"] {
  --mp-control-h:   34px;
  --mp-control-pad: 0 var(--mp-space-3);
  --mp-gap:         var(--mp-space-2);
  --mp-gap-tight:   var(--mp-space-1);
  --mp-pad-card:    var(--mp-space-3);
  --mp-text-ui:     var(--mp-text-sm);
  --mp-row-h:       36px;
  --mp-radius:      var(--mp-radius-sm);
}

[data-density="comfortable"] {
  --mp-control-h:   52px;
  --mp-control-pad: 0 var(--mp-space-5);
  --mp-gap:         var(--mp-space-5);
  --mp-gap-tight:   var(--mp-space-3);
  --mp-pad-card:    var(--mp-space-6);
  --mp-text-ui:     var(--mp-text-md);
  --mp-row-h:       56px;
  --mp-radius:      var(--mp-radius-lg);
}

/* ---- Palette: dark (Explicitly enabled via data-theme="dark" only) ------
   Tokens only. Never style a component inside this block — a colour whose
   only definition lives here will not apply in light mode.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --mp-bg:            #0E1116;
  --mp-surface:       #161A21;
  --mp-surface-2:     #1D222B;
  --mp-surface-sunk:  #11151B;

  --mp-ink:           #E9EDF3;
  --mp-ink-2:         #B7C0CD;
  --mp-muted:         #8A94A6;
  --mp-line:          #262D38;
  --mp-line-strong:   #38414F;

  --mp-accent:        #7FA3FF;
  --mp-accent-hover:  #9CB8FF;
  --mp-accent-ink:    #0E1116;
  --mp-accent-soft:   #1A2437;

  --mp-good:          #5CBF92;  --mp-good-soft:   #14261F;
  --mp-warn:          #E0913F;  --mp-warn-soft:   #2A1F11;
  --mp-danger:        #F08079;  --mp-danger-soft: #2C1615;
  --mp-info:          #7FA3FF;  --mp-info-soft:   #1A2437;

  --mp-good-ink:      #0E1116;
  --mp-warn-ink:      #0E1116;
  --mp-danger-ink:    #0E1116;
  --mp-info-ink:      #0E1116;

  /* Order-status ramp — see the light block for what each trio is for. */
  --mp-st-pending:        #E0B45C;
  --mp-st-pending-soft:   #2A2011;
  --mp-st-pending-line:   #4A3A18;

  --mp-st-confirmed:      #66C4D6;
  --mp-st-confirmed-soft: #10262B;
  --mp-st-confirmed-line: #1E4550;

  --mp-st-preparing:      #7FA3FF;
  --mp-st-preparing-soft: #1A2437;
  --mp-st-preparing-line: #2C3F63;

  --mp-st-ready:          #5CBF92;
  --mp-st-ready-soft:     #14261F;
  --mp-st-ready-line:     #234A38;

  --mp-st-delivery:       #B69BF0;
  --mp-st-delivery-soft:  #221A38;
  --mp-st-delivery-line:  #3C2E63;

  --mp-st-cancelled:      #8A94A6;
  --mp-st-cancelled-soft: #1D222B;
  --mp-st-cancelled-line: #38414F;

  --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --mp-shadow:    0 2px 6px rgba(0, 0, 0, .46), 0 1px 2px rgba(0, 0, 0, .34);
  --mp-shadow-lg: 0 12px 32px rgba(0, 0, 0, .58);
  --mp-focus:     0 0 0 3px rgba(127, 163, 255, .34);
}

/* ---- Primitives shared by every segment ---------------------------------- */
.mp-num { font-family: var(--mp-font-num); font-variant-numeric: tabular-nums; }

.mp-label {
  font-size: var(--mp-text-xs);
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: var(--mp-weight-medium);
}

/* Wide content scrolls inside its own box so the page never scrolls sideways. */
.mp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

:where(.mp-focusable):focus-visible,
.mp-focus:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}