/* Steelo ERP design tokens — the only place a colour, a face, a size or a space is written down.
   Components use these names; a literal colour in a component is a defect (design/README.md).
   Layout concept: a working bench — a black menu, a quiet neutral-grey ground, dense legible data,
   buttons coloured by meaning (green, yellow, red), Steelo orange on the brand mark alone. Colours match KP's ERP. */

:root {
  /* brand — Krishi 2026-10-08: "red / dark grey, as we kept for KP". KP's menu and greys, and
     KP's red one shade deeper, so the two companies' systems read as one family. */
  --brand-orange: #f04e22;          /* the logo mark ONLY — never a status, a bar or a button */
  --red:          #b00d28;          /* negative actions, current place, focus: KP's #c8102e one shade deeper (Krishi, 2026-10-08) */
  --red-hover:    #8f0a20;
  --red-wash:     #fdf2f3;          /* KP --accent-light */

  /* buttons by meaning — Krishi 2026-10-08: "anything positive green, anything negative red,
     submit draft etc yellow". Grey outline for everything else, so the coloured one is the decision.
     Green starts at the 700 step: white text on the two lighter greens is 2.5:1 and 3.8:1, under
     the 4.5:1 floor. Red one shade and green two shades deeper than first shown: Krishi, 2026-10-08,
     "red and green is okay". Draft was lemon yellow until 2026-10-14, when Krishi chose a grey outline
     (decision 028): only the button that commits is coloured. Its edge is darker than a plain button's,
     3.4:1 on white, so it still reads as the form's second action. */
  --positive:       #047857;
  --positive-hover: #065f46;
  --on-positive:    #ffffff;
  --draft:          #ffffff;
  --draft-hover:    #f2f2f2;
  --draft-edge:     #8a8a8a;
  --on-draft:       #171717;
  --qr-ground:      #ffffff;        /* an authenticator QR is scanned dark-on-white, in both themes */

  /* the menu: black and grey, light text — Krishi, 2026-10-08: "can we do black and grey", with
     #171717 and #212121. KP's navy went; his first word for the menu was "dark grey". */
  --rail-bg:      #171717;
  --rail-line:    #2a2a2a;
  --rail-hover:   #212121;
  --rail-active:  #2c2c2c;
  --rail-ink:     #f5f5f5;
  --rail-ink-2:   #d4d4d4;
  --rail-label:   #a3a3a3;          /* 7.1:1 on the menu */

  /* neutrals — KP's cool greys */
  --canvas:       #f5f5f5;          /* page ground */
  --surface:      #ffffff;          /* panels, tables, inputs */
  --surface-2:    #f2f2f2;          /* row hover, computed cells, quiet fills */
  --line:         #e5e5e5;          /* hairlines inside a panel */
  --line-strong:  #d4d4d4;          /* control borders, panel edges */
  --ink:          #171717;          /* text — 17.9:1 on white */
  --ink-2:        #4a4a4a;          /* secondary text — 8.9:1 */
  --ink-3:        #6b6b6b;          /* labels, captions — 5.3:1 on white, 4.9:1 on the ground, the AA floor */
  --on-red:       #ffffff;

  /* status — text colours are the -ink steps; -wash is a background (KP's pairs) */
  --red-ink:      #991b1b;          /* critical text */
  --good:         #10b981;          /* success marks (dots, bars) */
  --good-ink:     #047857;
  --good-wash:    #ecfdf5;
  --warn-ink:     #92400e;
  --warn-wash:    #fffbeb;
  --info-ink:     #1e40af;
  --info-wash:    #eff6ff;
  --idle-ink:     #4a4a4a;
  --idle-wash:    #f0f0f0;

  /* charts — one hue per sales category, fixed for life, order validated (CVD and normal vision,
     light and dark, adjacent pairs). Never re-ordered, never cycled. */
  --cat-market:         #2a78d6;
  --cat-modern-retail:  #eda100;
  --cat-export:         #1baf7a;
  --cat-ecommerce:      #4a3aa7;
  --cat-quick-commerce: #e87ba4;
  --cat-institutional:  #008300;
  --chart-grid:   #eeeeee;
  --chart-axis:   #d4d4d4;
  /* how old what is owed is: one hue, light (new) to dark (old); dark mode runs dark to light against its ground */
  --age-1: #a9c9ee; --age-2: #4f8fdc; --age-3: #1d4f91;

  /* type — one superfamily, three cuts, self-hosted from design/fonts/ (Krishi, 2026-10-08: "stay on IBM Plex"). */
  --face-ui:      "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --face-display: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;   /* titles: Plex Sans, not Condensed (Krishi, 2026-10-08) */
  --face-code:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-12: 0.75rem;  --fs-13: 0.8125rem;  --fs-14: 0.875rem;  --fs-16: 1rem;
  --fs-20: 1.25rem;  --fs-28: 1.75rem;    --fs-36: 2.25rem;

  /* space — no other gaps */
  --s-4: 4px;  --s-8: 8px;  --s-12: 12px;  --s-16: 16px;  --s-24: 24px;  --s-32: 32px;  --s-48: 48px;

  --radius-control: 6px;
  --radius-panel:   8px;
  --row-h:          36px;
  --rail-w:         240px;
  --rail-w-collapsed: 64px;
  --bar-h:          60px;
  --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.10);
  --focus-ring:     0 0 0 2px var(--surface), 0 0 0 4px var(--red);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      color-scheme: dark;
      --red: #c0122f; --red-hover: #d62441; --red-wash: #3a1219;
      --positive: #047857; --positive-hover: #278a68; --draft: #212121; --draft-hover: #2a2a2a; --draft-edge: #737373; --on-draft: #ececec;
      --rail-bg: #171717; --rail-line: #2a2a2a; --rail-hover: #212121; --rail-active: #2c2c2c;
      --canvas: #171717; --surface: #212121; --surface-2: #2a2a2a;
      --line: #2e2e2e; --line-strong: #404040;
      --ink: #ececec; --ink-2: #c4c4c4; --ink-3: #9b9b9b;
      --red-ink: #fb7185;
      --good: #34d399; --good-ink: #34d399; --good-wash: #0d2a22;
      --warn-ink: #fbbf24; --warn-wash: #2e220a;
      --info-ink: #93c5fd; --info-wash: #12233f;
      --idle-ink: #b5b5b5; --idle-wash: #2c2c2c;
      --cat-market: #3987e5; --cat-modern-retail: #c98500; --cat-export: #199e70; --cat-ecommerce: #9085e9;
      --cat-quick-commerce: #d55181; --cat-institutional: #008300;
      --chart-grid: #2c2c2c; --chart-axis: #404040;
    --age-1: #24508a; --age-2: #3987e5; --age-3: #a9c9ee;
      --age-1: #24508a; --age-2: #3987e5; --age-3: #a9c9ee;
      --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --red: #c0122f; --red-hover: #d62441; --red-wash: #3a1219;
    --positive: #047857; --positive-hover: #278a68; --draft: #212121; --draft-hover: #2a2a2a; --draft-edge: #737373; --on-draft: #ececec;
    --rail-bg: #171717; --rail-line: #2a2a2a; --rail-hover: #212121; --rail-active: #2c2c2c;
    --canvas: #171717; --surface: #212121; --surface-2: #2a2a2a;
    --line: #2e2e2e; --line-strong: #404040;
    --ink: #ececec; --ink-2: #c4c4c4; --ink-3: #9b9b9b;
    --red-ink: #fb7185;
    --good: #34d399; --good-ink: #34d399; --good-wash: #0d2a22;
    --warn-ink: #fbbf24; --warn-wash: #2e220a;
    --info-ink: #93c5fd; --info-wash: #12233f;
    --idle-ink: #b5b5b5; --idle-wash: #2c2c2c;
    --cat-market: #3987e5; --cat-modern-retail: #c98500; --cat-export: #199e70; --cat-ecommerce: #9085e9;
    --cat-quick-commerce: #d55181; --cat-institutional: #008300;
    --chart-grid: #2c2c2c; --chart-axis: #404040;
    --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Paper (decision 037): a document that prints — a sales order — is drawn on the light set whatever the screen's theme,
   as a PDF viewer shows a page, so what is seen is what prints. The light values, again, scoped to the page. */
.paper {
  color-scheme: light;
  --canvas: #f5f5f5; --surface: #ffffff; --surface-2: #f2f2f2;
  --line: #e5e5e5; --line-strong: #d4d4d4;
  --ink: #171717; --ink-2: #4a4a4a; --ink-3: #6b6b6b;
}