/* Orvia design tokens — Orvia Indigo, locked.
 *
 * 2.58.0 shipped four switchable palettes so the choice could be seen instead of argued
 * about. The choice has been made: **Orvia Indigo is the permanent brand identity**,
 * across POS, Admin and Platform, regardless of which industry a tenant runs or which
 * buyer is looking at the screen. The switcher is retired — see the note near the bottom
 * of this file for what replaced it and why.
 *
 * The reasoning, for whoever next wonders why the brand colour doesn't change per
 * industry: Orvia is not "a bakery's POS" that happens to also do finance. It is
 * infrastructure a business runs on and grows into, and infrastructure needs one
 * identity a customer trusts today and still trusts at ten times the size. The
 * industry supplies warmth through photography, category imagery and onboarding
 * content — never through the brand colour, navigation, primary actions or the logo.
 *
 * A found collision worth recording here rather than losing in a chat: **#5865F2 is
 * Discord's exact brand colour** ("blurple"). It was adopted anyway, deliberately —
 * the decision was made with that fact in view. If distinctiveness from a consumer
 * chat app becomes a concern later, the fix is a hue/saturation nudge in this file
 * alone; nothing downstream names the hex.
 */

:root {
  /* ── brand: Orvia Indigo ────────────────────────────────────────────────
     One primary across light and dark. --brand-bright is the separate, more
     saturated token for things that need to read on a dark canvas specifically —
     links and chart lines — which is why it is not simply "brand at a lighter
     tint": on light backgrounds it is too pale to use for text or icons. */
  --brand: #5865F2;
  --brand-strong: #4652D9;
  --brand-bright: #7C83FF;
  --brand-soft: #EEF0FF;
  --brand-subtle: #F5F6FF;
  --on-brand: #FFFFFF;

  /* The retired teal identity. No CSS references these any more — the eight rules that
     did were moved onto --text, --brand and --warning in 2.60.0, and two of them were
     bugs under Orvia Deep, where a near-black navy heading sat on a near-black canvas.
     Kept only so an old stylesheet or an exported asset referencing them still resolves
     to something rather than to nothing. */
  --orvia-navy: #14213D;
  --orvia-teal: #00A99D;
  --orvia-amber: #FFB547;

  /* ── surfaces and text ──────────────────────────────────────────────────
     Cool white, not warm grey — the restraint the brand review asked for. Indigo
     occupies selected navigation, primary buttons, links, focus rings and charts;
     everything else here is neutral by construction. */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  /* The handbook names an `elevated` surface distinct from `surface`. In Orvia Light both
     are white and separation comes from the border — that is the design, not an oversight,
     so both tokens exist and both are white here. */
  --elevated: #FFFFFF;
  /* Not in the handbook: the quiet grey step this product needs for hover, chips and
     table headers, which Light's white-on-white pair cannot provide. Kept as its own
     name rather than bent out of `elevated`. */
  --surface-2: #EDF0F6;
  --border: #DDE2EC;
  --text: #171A21;
  /* 11.72.0 (A11Y-06): #667085 was 4.35:1 on --surface-2 (every table header); #5B6474 is 5.2:1 there, 6.0:1 on white. */
  --text-muted: #5B6474;
  --nav: #11151D;

  /* ── semantic state ──────────────────────────────────────────────────────
     Brand is never one of these. "Ready to go live" and "the primary button" used
     to be the same colour on screen; they no longer are, on purpose. */
  --success: #22C55E;
  --warning: #F59E0B;
  /* 11.72.0 (A11Y-06): #EF4444 carried white text at 3.76:1 (Suspend, danger buttons) and was 3.76:1 as text; #DC2626 is 4.83:1 with white. Text in a state colour uses --danger-text. */
  --danger: #DC2626;
  /* 11.72.0 (A11Y-06): the QA badge, white on #3B82F6, was 3.67:1; #2563EB is 5.17:1. */
  --info: #2563EB;
  /* 10.89.0 (register ORV-UX-007): a state's colour as TEXT, on its own 10% tint. The fills above are 3:1 there at best
     (an "Out of order" badge measured 3.3:1 in Light); text needs 4.5:1, so it is a step darker in Light. */
  --danger-text: #991B1B;
  --success-text: #166534;
  --warning-text: #92400E;
  --info-text: #1E40AF;

  /* Text on a filled semantic or navigation surface.
     These exist because the fills are tokens and the text on them was not: a hardcoded
     ink on a fill that changes between themes is the pairing that goes unreadable. */
  --on-success: #05321C;
  --on-warning: #3A2A00;
  --on-danger: #FFFFFF;
  --on-nav: #FFFFFF;
  --on-nav-muted: #C7D0E0;
  /* The selected wash on the navigation bar. A white overlay works because --nav is dark
     in both appearances; it is a token so that stops being an assumption. */
  --nav-active: rgba(255, 255, 255, .14);

  /* The inverse surface: a toast, a bulk-action bar — something that must read as "on top
     of everything" in either theme, so it is deliberately the opposite of the canvas. */
  --inverse-surface: #14161C;
  --inverse-text: #F5F7FA;

  /* ── spacing ─────────────────────────────────────────────────────────────
     4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. A screen needing something between two
     steps is a screen that has not decided which it is. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* ── radius ──────────────────────────────────────────────────────────────
     By component type rather than by taste: controls sm, cards lg, sheets xl,
     pills for status. */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --radius-pill: 999px;
  /* The name the existing app CSS already uses. */
  --radius: 14px;

  /* ── elevation ───────────────────────────────────────────────────────────
     Three steps, and most surfaces use none. A shadow under everything is a
     shadow that separates nothing. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20, 33, 61, .06);
  --elev-2: 0 8px 24px rgba(20, 33, 61, .10);
  --elev-3: 0 20px 48px rgba(20, 33, 61, .16);

  /* ── type ────────────────────────────────────────────────────────────────
     One family. Tajawal takes over for Arabic through the [dir] rules in
     primitives.css, which is a script change rather than a different typographic
     system. */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ar: Tajawal, "Noto Sans Arabic", Inter, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --type-display: 700 32px/40px var(--font);
  --type-page: 700 24px/32px var(--font);
  --type-section: 600 16px/24px var(--font);
  --type-card: 600 14px/20px var(--font);
  --type-body: 400 14px/20px var(--font);
  --type-label: 500 12px/18px var(--font);
  --type-caption: 400 12px/16px var(--font);
  /* 3.73.0 — the Experience System scale. Sizes, weights and line heights are ALSO tokens on
     their own, so a component that needs "small, semibold" composes two names instead of
     writing 13px and 600 — which is how 650, 15px and 17px got into the product. The shorthand
     --type-* above remain the preferred way to set a role; these are the parts. */
  --type-record: 600 22px/28px var(--font);
  --type-small: 400 13px/18px var(--font);
  --type-body-strong: 600 14px/20px var(--font);
  --fs-display: 32px; --fs-page: 24px; --fs-record: 22px; --fs-kpi: 28px; --fs-kpi-sm: 20px;
  --fs-section: 16px; --fs-body: 14px; --fs-small: 13px; --fs-caption: 12px;
  --lh-tight: 1.25; --lh-normal: 1.45;
  /* Four weights. 650 was a variable-font value on one token and nowhere else; 550 and 800
     had crept into screens. The rule is not "600 is bad" — it is that no screen invents one. */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* Numbers that line up in a column. Applied by every numeric component, never by hand. */
  --num-figures: tabular-nums;
  --type-kpi: 700 28px/34px var(--font);

  /* ── control sizing ──────────────────────────────────────────────────────
     Three heights. The POS uses lg because a thumb is not a mouse; that is a
     size choice inside the system rather than a separate button. */
  --control-sm: 32px; --control-md: 40px; --control-lg: 48px;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  --sidebar-w: 248px;
  --dialog-sm: 420px; --dialog-md: 560px; --dialog-lg: 760px;

  /* ── content widths ──────────────────────────────────────────────────────
     Settings and forms are read, not scanned, so they are bounded. Operational
     screens are worked in and are not. */
  --width-settings: 840px;
  --width-form: 640px;

  /* ── stacking order ──────────────────────────────────────────────────────
     Named, because the numbers were invented per component — 40, 44, 45, 46, 55, 60,
     65, 70, 80, 90, 1000 — and the delivery map rendered over the navigation drawer
     because Leaflet's own panes run to 1000 and the drawer had been given 60. Nobody
     was wrong locally; there was simply no scale to be wrong about.

     A third-party widget is contained rather than out-numbered (see .leaflet-container
     in app.css): raising our layers above 1000 would only work until the next library
     picked a bigger number. */
  /* How much of the screen the keyboard is covering (7.02). Written by `keyboard-inset.js`;
     0 everywhere it cannot be measured, so every rule that uses it behaves as it did before. */
  --kb: 0px;

  --z-base: 0;
  --z-sticky: 20;      /* headers and toolbars that stay while content scrolls */
  --z-sheet-backdrop: 44; /* the scrim behind the POS cart sheet */
  --z-sheet-handle: 45;   /* the collapsed cart handle */
  --z-sheet: 46;          /* the cart sheet itself, over its own handle */
  --z-backdrop: 55;    /* the scrim behind a drawer */
  --z-drawer: 60;      /* navigation drawers */
  --z-dialog: 80;      /* modal dialogs, which must cover a navigation drawer */
  /* A FORM DRAWER AND A DIALOG ARE THE SAME LAYER (6.41).
   *
   * `--z-drawer` is 60 because a dialog must cover the NAVIGATION drawer. A form drawer is a
   * different thing wearing the same word: it is always the newest thing on the screen. At 60 the
   * schedule's day sheet opened BEHIND the editor that asked for it, and every tap stacked
   * another invisible one.
   *
   * Not simply raised above dialogs, because the traffic runs both ways: a confirm opened from
   * inside a form drawer is just as common as a drawer opened from a dialog, and whichever number
   * is higher hides the other half of the time. SAME LAYER, so the one appended last paints on
   * top — which is the one somebody just asked for, in either direction. */
  --z-sheet: 80;       /* a form drawer: the dialog layer, ordered by which opened last */
  --z-menu: 90;        /* popovers anchored to a control inside a dialog */
  --z-toast: 100;      /* feedback, above everything it reports on */

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
  /* For a focused table row, where an outer ring would be clipped by the grid's rounded edge. */
  --focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent);
  --dur-fast: .12s;
  --dur-slow: .24s;
  /* 3.73.0 — motion by purpose. Tiny state changes, menus and drawers, larger moves. Nothing
     slower than a quarter second: decoration at 400–600ms is the thing the brief rules out. */
  --dur-state: 140ms; --dur-menu: 200ms; --dur-nav: 220ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --move-menu: 4px;
  /* The shell (3.74.0 consumes these). Expanded and collapsed are tokens so the transition
     between them is one rule, not two numbers that drift. */
  --sidebar-expanded: 240px; --sidebar-collapsed: 64px;
  --width-record: 1400px; --width-form-wide: 1040px;
  /* Three heights, because three devices (7.18). 44px is the smallest target a finger hits
     reliably; 56 gives a row that and the padding either side of it. */
  --row-compact: 40px; --row-normal: 48px; --row-touch: 56px;
  --property-label-w: 176px;
  /* The object editor's section rail (6.60). A token because the rail and the grid it sits
     beside have to agree, and two numbers in two files do not stay equal. */
  --oe-rail-w: 208px;
  /* Where a frozen column ends and the scrolling part of a row begins (6.58). Not a border:
     a border occupies a pixel of the cell and would shift every width the moment somebody pins
     something. A one-sided shadow marks the seam and costs no space. Flipped for Arabic in
     primitives.css, because a shadow has no logical-property form. */
  --seam-pin: 8px 0 8px -8px color-mix(in srgb, var(--text) 22%, transparent);
}

/* Orvia Deep.
 *
 * Two selectors, one theme. `dark` is what `appearance.js` writes and what every rule in
 * this product references; `deep` is the name the brand handbook and its token file use.
 * Supporting both means CSS copied out of the brand package works here unchanged, and
 * nobody has to remember which vocabulary a given file speaks. */
[data-theme="dark"], [data-theme="deep"] {
  /* Orvia Deep. Not an inverted light theme: a graphite/near-black canvas with its
     own elevation steps, matched to the same semantic names. */
  --bg: #090B10;
  --surface: #11151D;
  --elevated: #171C26;
  --surface-2: #171C26;
  --border: #272D3A;
  --text: #F5F7FA;
  --text-muted: #9BA3B5;
  --nav: #090B10;

  --brand: #5865F2;
  --brand-strong: #7C83FF;
  --brand-bright: #7C83FF;
  --brand-soft: #1B2040;
  --brand-subtle: #141833;
  --on-brand: #FFFFFF;

  --success: #22C55E;
  --warning: #F59E0B;
  /* 11.72.0 (A11Y-06): #EF4444 carried white text at 3.76:1 (Suspend, danger buttons) and was 3.76:1 as text; #DC2626 is 4.83:1 with white. Text in a state colour uses --danger-text. */
  --danger: #DC2626;
  /* 11.72.0 (A11Y-06): the QA badge, white on #3B82F6, was 3.67:1; #2563EB is 5.17:1. */
  --info: #2563EB;
  /* …and a step lighter in Deep (the Deep "Out of order" badge measured 4.45:1). */
  --danger-text: #F87171;
  --success-text: #4ADE80;
  --warning-text: #FBBF24;
  --info-text: #60A5FA;

  --on-success: #05321C;
  --on-warning: #3A2A00;
  --on-danger: #FFFFFF;
  --on-nav: #FFFFFF;
  --on-nav-muted: #C7D0E0;
  --nav-active: rgba(255, 255, 255, .14);

  /* Inverted again on Deep: a near-black toast on a near-black canvas is invisible, so
     the "on top of everything" surface becomes light here. */
  --inverse-surface: #E8EBF2;
  --inverse-text: #14161C;

  /* Shadows do almost nothing on a dark surface; separation comes from the border
     and the surface step instead of a heavier shadow nobody can see. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .40);
  --elev-2: 0 8px 24px rgba(0, 0, 0, .45);
  --elev-3: 0 20px 48px rgba(0, 0, 0, .55);
}

/* ── the bridge ────────────────────────────────────────────────────────────
   The names `app.css`, `shop.css` and the platform console already use, pointed at
   the tokens above. Nothing has to be renamed in one release for the three
   applications to start sharing one model, and a screen migrated later simply stops
   using the alias.

   These are aliases, not a second model: change a value above and every application
   moves together. */
/* 3.73.0 — the brief's semantic names, DERIVED from the palette above rather than added as a
   second one. Nothing here is a new colour: text-secondary sits between text and muted, the
   raised surface is the elevated one, the strong border is the border mixed toward text.
   Both themes get them from the same rule because both derive from their own base tokens. */
:root, [data-theme="dark"], [data-theme="deep"] {
  --text-secondary: color-mix(in srgb, var(--text) 72%, var(--text-muted));
  --text-disabled: color-mix(in srgb, var(--text-muted) 55%, transparent);
  --surface-raised: var(--elevated);
  --surface-subtle: var(--surface-2);
  --border-strong: color-mix(in srgb, var(--border) 60%, var(--text-muted));
  --accent-hover: var(--brand-strong);
  --accent-subtle: var(--brand-soft);
  --status-neutral: var(--text-muted);
}

/* 11.46.0 (WS2): DOMAIN IDENTITY on the workspace — one solid colour per business domain, under a white glyph. The same
   in both themes on purpose: each keeps at least 3:1 against white (a graphic, WCAG 1.4.11), which a lightened "deep"
   variant would lose. Never a status colour: red, amber and green stay with what they mean. */
:root {
  --dom-neutral: #475467; --dom-sales: #4F5BD5; --dom-purchasing: #0E7F73; --dom-inventory: #6E4FE6; --dom-finance: #1F7AE0;
  --dom-people: #C11574; --dom-insights: #0077B6; --dom-operations: #C4410F; --dom-service: #A15C07; --dom-club: #067647;
  --dom-hospitality: #9E1FB8; --dom-realestate: #4E5BA6; --dom-signage: #026AA2; --dom-integrations: #155EEF;
  --on-dom: #FFFFFF;
  /* The workspace's own sizes (Design Pack r2): a tile's height and glyph, the heading over a section, the smallest
     caption (a band's label, a widget's scope), and the bottom bar's height on a phone. */
  --ws-tile-h: 80px; --ws-tile-h-phone: 104px; --ws-glyph: 44px; --ws-glyph-sm: 28px; --ws-glyph-xs: 20px;
  --fs-heading: 18px; --fs-micro: 11px; --ws-tabbar-h: 84px; --ws-widget-h: 190px; --ws-spark-h: 64px;
}

:root, [data-theme="dark"], [data-theme="deep"] {
  --panel: var(--surface);
  --panel2: var(--surface-2);
  --elevated-surface: var(--elevated);
  --line: var(--border);
  --muted: var(--text-muted);
  --accent: var(--brand);
  --accent2: var(--brand-strong);
  --good: var(--success);
  --warn: var(--warning);
  --chip: var(--surface-2);
}

/* ── retired: the four-palette comparison from 2.58.0 ────────────────────
 * `[data-palette="graphite-indigo"|"aubergine"|"navy"]` briefly let the whole product
 * switch brand identity for comparison. The decision is made — Orvia Indigo, always,
 * everywhere — so a brand switch has no reason to exist in the shipped product and is
 * removed rather than left dormant. graphite-indigo is in effect what --brand became.
 *
 * Gold and jade are not adopted as alternative brand themes and are not wired to any
 * attribute. They are reserved, per that decision, for semantic or data-visualisation
 * use where a warm or fresh hue earns its place on merit — a chart series colour, an
 * industry-specific illustration tint — never as a substitute for --brand. Recorded
 * here as values so a future data-viz palette does not have to re-derive them, not as
 * something any screen should reach for today:
 *
 *   reserved-gold:  #D6A84B  (hover #B98C34, soft #FBF3E3)
 *   reserved-jade:  #19C37D  (hover #34D399, soft #E8FBF3)
 */

/* ── appearance: System / Light / Dark ────────────────────────────────────
 * The control described in the brand decision. `data-theme="dark"` is still what
 * switches the theme — that mechanism is unchanged from 2.57.0 — but which theme is
 * active is now resolved by `design/appearance.js` rather than by each page hard-coding
 * an attribute. See that file for the resolution order and for why Admin/POS and
 * Platform are allowed different *default* recommendations while sharing one control
 * and one token model.
 */