/* Ecomly design tokens. Light is the default theme; Ecomly Dark applies when the
   operator picks it, or when the system prefers dark and no theme is chosen. Every
   component reads these tokens, so a palette change is made here and nowhere else.

   Brand colours: Ink Navy #0E1A2B, Lime Signal #C8F169, Paper #F6F7F2, Deep Olive
   #3D5A0F, Slate #5B6678, Mist #E3E7DF. Lime is a highlight and never text on a
   light surface; olive carries primary actions and links on light. */

/* Fonts are self-hosted (variable files, served by the dashboard), so the first
   paint never waits on a third-party CDN. Lexend leads headings and brand numbers,
   Manrope carries the interface, Readex Pro carries every Arabic screen. */
@font-face {
  font-family: "Lexend";
  src: url("/dashboard/fonts/Lexend-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/dashboard/fonts/Manrope-wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("/dashboard/fonts/ReadexPro-wght.ttf") format("truetype");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: var(--font-dashboard);
  color-scheme: light dark;
  --nav: #0e1a2b;
  --nav2: #14233a;
  --navline: rgba(246, 247, 242, 0.1);
  --navink: #f6f7f2;
  --navmuted: #b7c0cd;
  --green: #3d5a0f;
  --green2: #2f4a0a;
  --greenglow: rgba(61, 90, 15, 0.16);
  --mint: #e9f2d0;
  --lime: #c8f169;
  --bg: #f6f7f2;
  --card: #ffffff;
  --card2: #eff1ea;
  --ink: #0e1a2b;
  --muted: #5b6678;
  --line: #e3e7df;
  --line-strong: #cbd2c6;
  --red: #c3352b;
  --redbg: #f8e7e6;
  --amber: #9a5b0b;
  --amberbg: #f3ebe2;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(14, 26, 43, 0.04);
  --shadow-lg: 0 12px 32px rgba(14, 26, 43, 0.14);
  --focus: 0 0 0 2px #ffffff, 0 0 0 4px #3d5a0f;
  --focus-nav: 0 0 0 2px #0e1a2b, 0 0 0 4px #c8f169;

  /* Status palette. The base colour marks dots and borders; the -text variant is
     the same hue nudged darker so a chip reads at WCAG AA on its own 12% tint. */
  --status-done: #1A7F45;
  --status-done-text: #187741;
  --status-done-bg: #E4F0E9;
  --status-info: #2563EB;
  --status-info-text: #235EDF;
  --status-info-bg: #E5ECFD;
  --status-attn: #9A5B0B;
  --status-attn-text: #97590B;
  --status-attn-bg: #F3EBE2;
  --status-prob: #C3352B;
  --status-prob-text: #BD332A;
  --status-prob-bg: #F8E7E6;
  --status-neu: #6B7587;
  --status-neu-text: #606979;
  --status-neu-bg: #EDEEF1;

  /* Order status tones. One token trio per operational outcome, so a status badge,
     a status tab and the legend all read from the same place and a theme only has
     to restate the ones that need to change. Cancelled is deliberately neutral
     slate rather than red: a return and a cancellation must not look alike, because
     that is the distinction that actually costs money. */
  --tone-pending-bg: #F3EBE2;
  --tone-pending-text: #97590B;
  --tone-pending-border: #D2B591;
  --tone-confirmed-bg: #E6EBF2;
  --tone-confirmed-text: #1B3358;
  --tone-confirmed-border: #9BADC6;
  --tone-transit-bg: #E5ECFD;
  --tone-transit-text: #235EDF;
  --tone-transit-border: #9DB9F6;
  --tone-delivered-bg: #E4F0E9;
  --tone-delivered-text: #187741;
  --tone-delivered-border: #98C5AB;
  --tone-suspended-bg: #F5EAFC;
  --tone-suspended-text: #6A2C86;
  --tone-suspended-border: #B184C9;
  --tone-returned-bg: #FFEEDD;
  --tone-returned-text: #8A4410;
  --tone-returned-border: #D4914F;
  --tone-returned-late-bg: #F8E7E6;
  --tone-returned-late-text: #BD332A;
  --tone-returned-late-border: #E4A4A0;
  --tone-cancelled-bg: #EDEEF1;
  --tone-cancelled-text: #606979;
  --tone-cancelled-border: #BCC1C9;

  /* Semantic tokens are the only interaction contract components consume. */
  --surface-canvas: var(--bg);
  --surface-raised: var(--card);
  --surface-subtle: var(--card2);
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --border-default: var(--line);
  --border-strong: var(--line-strong);
  --interaction-hover-bg: var(--card2);
  --interaction-hover-text: var(--ink);
  --interaction-selected-bg: var(--mint);
  --interaction-selected-text: var(--green);
  --interaction-disabled-bg: color-mix(in srgb, var(--card2) 78%, transparent);
  --interaction-disabled-text: var(--muted);
  --action-primary-text: #ffffff;

  /* Typography. Lexend (600) for headings, page titles and hero numbers; Manrope
     for the interface and body; Readex Pro for every Arabic screen. Readex Pro is
     Lexend-based, so Latin text inside an Arabic screen stays in the same family. */
  --font-display: "Lexend", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-dashboard:
    "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-arabic: "Readex Pro", "Manrope", Tahoma, Arial, sans-serif;
  --font-technical:
    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --tone-positive-text: #187741;
  --tone-negative-text: #bd332a;
}

/* Arabic screens read from one family at every level, so headings, tables and
   controls all pick up Readex Pro through the same two tokens. */
html[lang="ar"] {
  --font-display: var(--font-arabic);
  --font-dashboard: var(--font-arabic);
}
html[lang="ar"] body {
  line-height: 1.7;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-dashboard);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
}
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: var(--font-arabic);
}

.metric,
.money,
td,
th,
[data-tabular] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* One interface font across the whole dashboard. Figures and SKUs get tabular
   numerals so columns still line up, which is what the monospace family was
   really being used for. --font-technical is kept for raw data where telling l from 1
   and O from 0 matters: secrets, JSON and asset IDs. */
.mono,
.sku,
[data-technical] {
  font-family: inherit !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Ecomly Dark. The same block serves both entry points: the system preference
   when no theme is chosen, and an explicit "dark" choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --nav: #0E1A2B;
    --nav2: #14233A;
    --navline: rgba(246, 247, 242, 0.1);
    --navink: #f6f7f2;
    --navmuted: #b7c0cd;
    --green: #c8f169;
    --green2: #b2dc52;
    --greenglow: rgba(200, 241, 105, 0.18);
    --mint: rgba(200, 241, 105, 0.14);
    --lime: #c8f169;
    --bg: #09131f;
    --card: #0f1d30;
    --card2: #162842;
    --ink: #f6f7f2;
    --muted: #a9b4c4;
    --line: #223550;
    --line-strong: #34506f;
    --red: #ff8f86;
    --redbg: rgba(255, 143, 134, 0.14);
    --amber: #f2b756;
    --amberbg: rgba(242, 183, 86, 0.14);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --focus: 0 0 0 2px #09131f, 0 0 0 4px #c8f169;
    --focus-nav: 0 0 0 2px #0e1a2b, 0 0 0 4px #c8f169;
    --action-primary-text: #0e1a2b;
    --tone-positive-text: #5bd58c;
    --tone-negative-text: #ff9b94;
    --status-done: #5BD58C;
    --status-done-text: #5BD58C;
    --status-done-bg: #1B3A3F;
    --status-info: #82AAFF;
    --status-info-text: #82AAFF;
    --status-info-bg: #213451;
    --status-attn: #F2B756;
    --status-attn-text: #F2B756;
    --status-attn-bg: #333636;
    --status-prob: #FF8F86;
    --status-prob-text: #FF8F86;
    --status-prob-bg: #352F3E;
    --status-neu: #A9B4C4;
    --status-neu-text: #A9B4C4;
    --status-neu-bg: #283548;
    --tone-pending-bg: #333636;
    --tone-pending-text: #F2B756;
    --tone-pending-border: #756241;
    --tone-confirmed-bg: #1A2B47;
    --tone-confirmed-text: #BFD0EC;
    --tone-confirmed-border: #4B658F;
    --tone-transit-bg: #213451;
    --tone-transit-text: #82AAFF;
    --tone-transit-border: #435C8D;
    --tone-delivered-bg: #1B3A3F;
    --tone-delivered-text: #5BD58C;
    --tone-delivered-border: #317059;
    --tone-suspended-bg: #2D1B3A;
    --tone-suspended-text: #E6C6F7;
    --tone-suspended-border: #80589A;
    --tone-returned-bg: #3B2413;
    --tone-returned-text: #FFD2ab;
    --tone-returned-border: #9C6634;
    --tone-returned-late-bg: #352F3E;
    --tone-returned-late-text: #FF8F86;
    --tone-returned-late-border: #7B5057;
    --tone-cancelled-bg: #283548;
    --tone-cancelled-text: #A9B4C4;
    --tone-cancelled-border: #546173;

  }
}
html[data-theme="dark"] {
  --nav: #0E1A2B;
  --nav2: #14233A;
  --navline: rgba(246, 247, 242, 0.1);
  --navink: #f6f7f2;
  --navmuted: #b7c0cd;
  --green: #c8f169;
  --green2: #b2dc52;
  --greenglow: rgba(200, 241, 105, 0.18);
  --mint: rgba(200, 241, 105, 0.14);
  --lime: #c8f169;
  --bg: #09131f;
  --card: #0f1d30;
  --card2: #162842;
  --ink: #f6f7f2;
  --muted: #a9b4c4;
  --line: #223550;
  --line-strong: #34506f;
  --red: #ff8f86;
  --redbg: rgba(255, 143, 134, 0.14);
  --amber: #f2b756;
  --amberbg: rgba(242, 183, 86, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --focus: 0 0 0 2px #09131f, 0 0 0 4px #c8f169;
  --focus-nav: 0 0 0 2px #0e1a2b, 0 0 0 4px #c8f169;
  --action-primary-text: #0e1a2b;
  --tone-positive-text: #5bd58c;
  --tone-negative-text: #ff9b94;
  --status-done: #5BD58C;
  --status-done-text: #5BD58C;
  --status-done-bg: #1B3A3F;
  --status-info: #82AAFF;
  --status-info-text: #82AAFF;
  --status-info-bg: #213451;
  --status-attn: #F2B756;
  --status-attn-text: #F2B756;
  --status-attn-bg: #333636;
  --status-prob: #FF8F86;
  --status-prob-text: #FF8F86;
  --status-prob-bg: #352F3E;
  --status-neu: #A9B4C4;
  --status-neu-text: #A9B4C4;
  --status-neu-bg: #283548;
  --tone-pending-bg: #333636;
  --tone-pending-text: #F2B756;
  --tone-pending-border: #756241;
  --tone-confirmed-bg: #1A2B47;
  --tone-confirmed-text: #BFD0EC;
  --tone-confirmed-border: #4B658F;
  --tone-transit-bg: #213451;
  --tone-transit-text: #82AAFF;
  --tone-transit-border: #435C8D;
  --tone-delivered-bg: #1B3A3F;
  --tone-delivered-text: #5BD58C;
  --tone-delivered-border: #317059;
  --tone-suspended-bg: #2D1B3A;
  --tone-suspended-text: #E6C6F7;
  --tone-suspended-border: #80589A;
  --tone-returned-bg: #3B2413;
  --tone-returned-text: #FFD2ab;
  --tone-returned-border: #9C6634;
  --tone-returned-late-bg: #352F3E;
  --tone-returned-late-text: #FF8F86;
  --tone-returned-late-border: #7B5057;
  --tone-cancelled-bg: #283548;
  --tone-cancelled-text: #A9B4C4;
  --tone-cancelled-border: #546173;
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}