/*
 * LogisticaHQ design tokens (Phase 1b "Look", spec section 1).
 *
 * index.html loads this for every tenant. Custom properties change nothing on their own, so it is safe with the Fluent 2
 * skin switched off. The skin (lhq-fluent2-skin.css) and the Angular 22 screens both read these values: one source of
 * truth for old and new screens. Every text/background pair used together must pass WCAG AA; ClientApp/shell-tests/
 * tokens.test.mjs checks it. Keep this file to custom properties only - that test checks that too.
 */
:root {
  --lhq-brand: #0F6CBD;
  --lhq-brand-hover: #115EA3;
  --lhq-brand-pressed: #0F548C;
  --lhq-brand-tint: #EBF3FC;
  /* Blue text and icons (links, the active tab). Equal to the brand in light; lighter in dark, where the brand blue as text on
     a dark card fails AA. */
  --lhq-brand-text: #0F6CBD;
  /* Stronger blue text, on the brand tint (the avatar, selected items). Equal to the pressed brand in light. */
  --lhq-brand-text-strong: #0F548C;
  /* Text on a coloured fill (primary and status buttons). Always white, in both themes: the neutral ramp inverts in dark,
     so --lhq-neutral-0 is no longer white there. */
  --lhq-on-brand: #FFFFFF;

  /* Fluent 2 neutral ramp, lightest to darkest. */
  --lhq-neutral-0: #FFFFFF;
  --lhq-neutral-50: #FAFAFA;
  --lhq-neutral-100: #F0F0F0;
  --lhq-neutral-200: #E0E0E0;
  --lhq-neutral-300: #D1D1D1;
  --lhq-neutral-500: #707070;
  --lhq-neutral-600: #616161;
  --lhq-neutral-700: #424242;
  --lhq-neutral-900: #242424;

  --lhq-font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --lhq-radius-s: 4px;
  --lhq-radius-m: 6px;
  --lhq-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.08);
  --lhq-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 8px rgba(0, 0, 0, 0.12);
  --lhq-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0F6CBD;

  /* The current menu section's colour. P4Platform.Skin.SetSection sets it on <html> on every state change; brand until then. */
  --lhq-section: #0F6CBD;

  /* Status pills: text on background. Fixed palette - never section colours (spec decision 3). */
  --lhq-status-neutral: #424242;
  --lhq-status-neutral-bg: #F0F0F0;
  --lhq-status-info: #0F548C;
  --lhq-status-info-bg: #EBF3FC;
  --lhq-status-warning: #8A3707;
  --lhq-status-warning-bg: #FFF4CE;
  --lhq-status-success: #0E700E;
  --lhq-status-success-bg: #F1FAF1;
  --lhq-status-danger: #B10E1C;
  --lhq-status-danger-bg: #FDF3F4;

  /* SQL editor colours (sql-editor/engine-entry.ts): CodeMirror's own default highlight colours in light. */
  --lhq-code-keyword: #770088;
  --lhq-code-atom: #221199;
  --lhq-code-number: #116644;
  --lhq-code-string: #AA1111;
  --lhq-code-variable: #0000FF;
  --lhq-code-type: #008855;
  --lhq-code-parameter: #225566;
  --lhq-code-comment: #994400;
  /* Status colours as solid fills under white text (Delete buttons, solid badges). Equal to the text colours in light; in
     dark the text colours lighten to read on the dark card, and a fill needs a mid tone white text still reads on. */
  --lhq-status-success-fill: #0E700E;
  --lhq-status-warning-fill: #8A3707;
  --lhq-status-danger-fill: #B10E1C;
}

/*
 * Syncfusion Fluent 2 variables mapped onto the tokens, so Angular 22 screens follow any token change. Only variables
 * whose Fluent 2 default already equals the token are mapped; hover and pressed variants are left to Syncfusion, which
 * defines them per component. html:root outranks the plain :root in /UI/ng/styles.css, which index.html links after this
 * file.
 */
html:root {
  --e-font-name: var(--lhq-font);
}

/*
 * The colour mappings apply in light only. In dark, Syncfusion's own Fluent 2 dark palette (its .e-dark-mode block, the
 * class lhq-skin.js puts on <html>) is used as it is: it is designed as a whole - "primary dark" there is a light blue
 * for accent text - and mapping it onto the light theme's pressed blue made that text unreadable (2026-09-28).
 */
html:root:not([data-theme="dark"]) {
  --color-sf-primary: var(--lhq-brand);
  --color-sf-primary-lighter: var(--lhq-brand-tint);
  --color-sf-primary-dark: var(--lhq-brand-pressed);
  --color-sf-content-text-color: var(--lhq-neutral-900);
  --color-sf-border: var(--lhq-neutral-300);
  --color-sf-border-light: var(--lhq-neutral-200);
}

/*
 * Dark theme (Glenn approved the design 2026-09-28: https://claude.ai/artifact/N6C3cgSeMDKTHamJTcV7mW). The shell sets
 * data-theme="dark" on <html> (lhq-skin.js, early, from the saved choice or the computer's own setting) together with
 * Syncfusion's own dark switch, the e-dark-mode class. Fluent 2's dark ramp; every pair tokens.test.mjs checks in light is
 * checked here too. Screen only: printed pages, labels and PDFs stay light.
 */
@media screen {
  html[data-theme="dark"] {
    --lhq-brand: #115EA3;
    --lhq-brand-hover: #0F6CBD;
    --lhq-brand-pressed: #0F548C;
    --lhq-brand-tint: #0E2A45;
    --lhq-brand-text: #62ABF5;
    --lhq-brand-text-strong: #8EC2F8;

    --lhq-neutral-0: #292929;
    --lhq-neutral-50: #1F1F1F;
    --lhq-neutral-100: #333333;
    --lhq-neutral-200: #3D3D3D;
    --lhq-neutral-300: #666666;
    --lhq-neutral-500: #999999;
    --lhq-neutral-600: #ADADAD;
    --lhq-neutral-700: #D6D6D6;
    --lhq-neutral-900: #FFFFFF;

    --lhq-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.4);
    --lhq-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.5);
    --lhq-focus-ring: 0 0 0 2px #292929, 0 0 0 4px #62ABF5;

    --lhq-status-neutral: #D6D6D6;
    --lhq-status-neutral-bg: #3D3D3D;
    --lhq-status-info: #62ABF5;
    --lhq-status-info-bg: #0E2A45;
    --lhq-status-warning: #F7C948;
    --lhq-status-warning-bg: #3D2A05;
    --lhq-status-success: #9FD89F;
    --lhq-status-success-bg: #0D2E0D;
    --lhq-status-danger: #F1707B;
    --lhq-status-danger-bg: #3B0A10;
    --lhq-status-success-fill: #107C10;
    --lhq-status-warning-fill: #8A3707;
    --lhq-status-danger-fill: #C50F1F;

    /* SQL editor colours in dark: VS Code's Dark+ palette, each checked for AA on the dark surface. */
    --lhq-code-keyword: #C586C0;
    --lhq-code-atom: #569CD6;
    --lhq-code-number: #B5CEA8;
    --lhq-code-string: #CE9178;
    --lhq-code-variable: #9CDCFE;
    --lhq-code-type: #4EC9B0;
    --lhq-code-parameter: #DCDCAA;
    --lhq-code-comment: #7FB36A;
  }
}