/**
 * Design tokens — the contract.
 *
 * Everything visual in this product should read one of these variables rather
 * than carry its own hex code. That is the whole point: there are 1,389 blade
 * files and no realistic path to editing them all, so the only way to change how
 * the product LOOKS is to change what its colours MEAN in one place and have the
 * old markup pick it up. `compat.css` is the other half of that — it restyles the
 * Bootstrap 3 and AdminLTE classes those blades already use, in terms of these
 * variables.
 *
 * ---
 *
 * THE DIRECTION IS "INSTRUMENT PANEL, NOT BROCHURE".
 *
 * An ERP is read for eight hours a day by somebody who already knows what the
 * screen does. It is not a landing page. So: flat surfaces, hairline borders
 * instead of shadows, shadows reserved for things that genuinely float, dense
 * spacing by default, and numbers that line up in a column because a column of
 * money that does not line up cannot be scanned.
 *
 * ---
 *
 * COLOURS ARE STORED AS CHANNELS, NOT AS HEX.
 *
 *     --sx-primary-700: 0 78 235;
 *
 * so that both `rgb(var(--sx-primary-700))` and
 * `rgb(var(--sx-primary-700) / 0.12)` work. A token stored as `#004EEB` cannot
 * be given an alpha without a second token for every opacity anybody wants, and
 * that is how a palette turns into forty variables.
 *
 * The brand value is not invented: 0 78 235 is the primary-700 already compiled
 * into `public/css/tailwind/app.css`, read out of the bundle rather than chosen.
 *
 * ---
 *
 * DARK MODE IS BY EXPLICIT CHOICE ONLY, and deliberately does not follow the
 * operating system's colour-scheme setting. A product a third migrated cannot
 * honour that: the tokens would go dark while ~1,224 unmigrated AdminLTE
 * blades stayed hardcoded white, which is not a dark product but dark cards
 * on a white page with invisible text. Tokens are defined on bare `:root`,
 * then redefined once under `[data-theme="dark"]`, which the layout stamps
 * only when somebody has asked for it. See the note above that block.
 */

:root {
    /* ---------------------------------------------------------------
       Brand
       --------------------------------------------------------------- */

    --sx-primary-50: 239 246 255;
    --sx-primary-100: 219 234 254;
    --sx-primary-200: 191 219 254;
    --sx-primary-300: 147 197 253;
    --sx-primary-400: 96 165 250;
    --sx-primary-500: 59 130 246;
    --sx-primary-600: 37 99 235;
    --sx-primary-700: 0 78 235;   /* #004EEB — read out of the compiled bundle */
    --sx-primary-800: 0 64 193;   /* #0040C1 */
    --sx-primary-900: 30 58 138;

    /* ---------------------------------------------------------------
       Neutrals — the surfaces a working screen is mostly made of
       --------------------------------------------------------------- */

    --sx-neutral-0: 255 255 255;
    --sx-neutral-25: 252 252 253;
    --sx-neutral-50: 249 250 251;
    --sx-neutral-100: 242 244 247;
    --sx-neutral-200: 227 232 239;  /* #e3e8ef — the bundle's default border */
    --sx-neutral-300: 205 213 225;
    --sx-neutral-400: 152 162 179;
    --sx-neutral-500: 102 112 133;
    --sx-neutral-600: 71 84 103;
    --sx-neutral-700: 52 64 84;
    --sx-neutral-800: 29 41 57;
    --sx-neutral-900: 16 24 40;
    --sx-neutral-950: 12 17 29;

    /* ---------------------------------------------------------------
       Feedback
       --------------------------------------------------------------- */

    --sx-success-500: 18 152 91;
    --sx-success-600: 8 125 72;
    --sx-warning-500: 220 148 8;
    --sx-warning-600: 181 113 4;
    --sx-danger-500: 217 45 32;
    --sx-danger-600: 180 35 24;
    --sx-info-500: 2 132 199;

    /* ---------------------------------------------------------------
       Roles — what a colour MEANS, which is what markup should ask for
       --------------------------------------------------------------- */

    --sx-canvas: var(--sx-neutral-50);      /* behind everything */
    --sx-surface: var(--sx-neutral-0);      /* cards, panels, tables */
    --sx-surface-sunken: var(--sx-neutral-100);
    --sx-surface-raised: var(--sx-neutral-0);

    --sx-border: var(--sx-neutral-200);
    --sx-border-strong: var(--sx-neutral-300);

    --sx-text: var(--sx-neutral-900);
    --sx-text-muted: var(--sx-neutral-500);
    --sx-text-inverse: var(--sx-neutral-0);

    --sx-accent: var(--sx-primary-700);
    --sx-accent-hover: var(--sx-primary-800);
    --sx-accent-subtle: var(--sx-primary-50);

    --sx-focus-ring: var(--sx-primary-500);

    /* ---------------------------------------------------------------
       ERP SEMANTICS — the set a generic design system does not have
       ---------------------------------------------------------------

       These exist because this product's job is money, and money has meanings
       that "green" and "red" do not carry. A debit is not a success and a credit
       is not a failure; a negative amount is not an error. Naming them here is
       what stops somebody reaching for --sx-danger to show a credit note.
       --------------------------------------------------------------- */

    --sx-amount-positive: var(--sx-neutral-900);  /* the ordinary case: not green */
    --sx-amount-negative: var(--sx-danger-600);
    --sx-amount-zero: var(--sx-neutral-400);

    --sx-debit: var(--sx-neutral-900);
    --sx-credit: var(--sx-primary-700);

    --sx-status-draft: var(--sx-neutral-500);
    --sx-status-pending: var(--sx-warning-500);
    --sx-status-approved: var(--sx-success-600);
    --sx-status-posted: var(--sx-success-600);
    --sx-status-overdue: var(--sx-danger-500);
    --sx-status-void: var(--sx-neutral-400);
    --sx-status-held: var(--sx-warning-600);

    /* ---------------------------------------------------------------
       Typography
       ---------------------------------------------------------------

       Named after what is actually installed. `Inter` is first in the compiled
       Tailwind bundle and is NOT present in public/fonts, so it silently falls
       back to the system face on every machine — which is a perfectly good
       instrument-panel face and costs nothing to load. Source Sans Pro and
       Almarai ARE self-hosted, so they are named where they help.
       --------------------------------------------------------------- */

    --sx-font-sans: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sx-font-arabic: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --sx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --sx-text-xs: 0.75rem;
    --sx-text-sm: 0.8125rem;
    --sx-text-base: 0.875rem;   /* 14px: an ERP default, not 16 */
    --sx-text-lg: 1rem;
    --sx-text-xl: 1.125rem;
    --sx-text-2xl: 1.375rem;

    --sx-leading-tight: 1.25;
    --sx-leading-normal: 1.5;

    --sx-weight-normal: 400;
    --sx-weight-medium: 600;
    --sx-weight-bold: 700;

    /* ---------------------------------------------------------------
       Shape and depth
       ---------------------------------------------------------------

       Hairline borders, not shadows. A shadow says "this floats above the page",
       so putting one on every panel says nothing at all — and an ERP screen is
       mostly panels.
       --------------------------------------------------------------- */

    --sx-radius-sm: 3px;
    --sx-radius: 5px;
    --sx-radius-lg: 8px;
    --sx-radius-pill: 999px;

    --sx-hairline: 1px;

    /* Reserved for things that genuinely leave the plane. */
    --sx-shadow-popover: 0 4px 12px rgb(var(--sx-neutral-900) / 0.10),
                         0 1px 3px rgb(var(--sx-neutral-900) / 0.06);
    --sx-shadow-modal: 0 16px 48px rgb(var(--sx-neutral-900) / 0.18);

    /* ---------------------------------------------------------------
       Density
       ---------------------------------------------------------------

       Three modes, and an enterprise evaluator notices inside thirty seconds
       which one a product ships. Comfortable is the default because it is what
       the existing markup roughly is; compact and dense are what somebody
       reconciling four hundred lines actually wants.
       --------------------------------------------------------------- */

    --sx-space-1: 4px;
    --sx-space-2: 8px;
    --sx-space-3: 12px;
    --sx-space-4: 16px;
    --sx-space-5: 20px;
    --sx-space-6: 24px;

    --sx-row-y: 8px;
    --sx-row-x: 12px;
    --sx-control-y: 7px;
    --sx-control-x: 11px;
    --sx-control-height: 34px;
    --sx-panel-pad: 16px;
}

:root[data-density='compact'] {
    --sx-row-y: 5px;
    --sx-row-x: 10px;
    --sx-control-y: 5px;
    --sx-control-x: 9px;
    --sx-control-height: 30px;
    --sx-panel-pad: 12px;
}

:root[data-density='dense'] {
    --sx-row-y: 3px;
    --sx-row-x: 8px;
    --sx-control-y: 3px;
    --sx-control-x: 7px;
    --sx-control-height: 26px;
    --sx-panel-pad: 8px;
    --sx-text-base: 0.8125rem;
}

/* -------------------------------------------------------------------
   Dark — BY EXPLICIT CHOICE ONLY
   -------------------------------------------------------------------

   There is deliberately NO system-preference media query here, and that is
   not an oversight — it was tried and it broke every screen. (Named in prose
   rather than in code so the guard test can assert the rule by its absence.)

   This product is a THIRD migrated. Around 1,224 blades still render through
   AdminLTE and Bootstrap 3, whose whites are hardcoded in a vendor bundle
   nobody is going to rewrite. Following the operating system's preference
   flips the tokens — and therefore every `sx-` component and everything
   `compat.css` restyles — to dark while that untouched majority stays white.
   The result on a machine set to dark is not a dark product: it is dark cards
   floating on a white page with invisible text, which is worse than either
   theme on its own and is what a customer actually saw.

   So the system preference is ignored until the legacy layer can follow it.
   Dark applies when somebody asks for it (`UI_THEME=dark`, stamped as
   `data-theme` by the layout) and not before. Restoring the media query is a
   one-line change on the day `ui:status` says the last hardcoded white is
   gone — and not a day earlier.
   ------------------------------------------------------------------- */

/* An explicit dark choice beats the system in both directions. */
:root[data-theme='dark'] {
    --sx-canvas: var(--sx-neutral-950);
    --sx-surface: var(--sx-neutral-900);
    --sx-surface-sunken: var(--sx-neutral-950);
    --sx-surface-raised: var(--sx-neutral-800);

    --sx-border: var(--sx-neutral-700);
    --sx-border-strong: var(--sx-neutral-600);

    --sx-text: var(--sx-neutral-50);
    --sx-text-muted: var(--sx-neutral-400);
    --sx-text-inverse: var(--sx-neutral-900);

    --sx-accent: var(--sx-primary-400);
    --sx-accent-hover: var(--sx-primary-300);
    --sx-accent-subtle: var(--sx-neutral-800);

    --sx-amount-positive: var(--sx-neutral-50);
    --sx-amount-negative: 252 165 165;
    --sx-debit: var(--sx-neutral-50);
    --sx-credit: var(--sx-primary-400);

    --sx-status-approved: 74 222 128;
    --sx-status-posted: 74 222 128;
    --sx-status-overdue: 248 113 113;
    --sx-status-pending: 250 204 21;
}

/* -------------------------------------------------------------------
   Utilities that carry a MEANING rather than a value
   -------------------------------------------------------------------

   Deliberately few. These are the ones that stop money being coloured by hand,
   and they are safe to use in old markup because they collide with nothing.
   ------------------------------------------------------------------- */

.sx-money,
.sx-num {
    /* Digits of equal width. A column of amounts that does not line up cannot
       be scanned, and lining it up costs one declaration. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.sx-amount-negative { color: rgb(var(--sx-amount-negative)); }
.sx-amount-zero { color: rgb(var(--sx-amount-zero)); }
.sx-debit { color: rgb(var(--sx-debit)); }
.sx-credit { color: rgb(var(--sx-credit)); }

/**
 * An invoice number or an IBAN inside an Arabic sentence renders as garbage
 * without this, because the bidi algorithm reorders it. Mirroring a layout is
 * table stakes; getting this right is where the product beats its competitors.
 */
.sx-bidi-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}