/* Fuel Trading System — design tokens.
 *
 * Single source of truth for colour, type, space, shape and motion. Nothing
 * downstream may hard-code a value that exists here.
 *
 * Colour is spent on action and status, never decoration. Every semantic
 * colour is paired in markup with a glyph and a word, so status is never
 * carried by hue alone (WCAG 2.2 §1.4.1).
 */

:root {
  /* ---- brand: Microsoft Dynamics 365 Business Central -------------------
   * Business Central's published control-add-in palette anchors the interface
   * at cyan #00B7C3, deep teal #008089 and secondary slate #505C6D. The
   * deeper teal is used where white text must meet WCAG AA; the brighter cyan
   * remains the unmistakable product accent.
   */
  --brand-50:  #e6f6f7;
  --brand-100: #c5ecef;
  --brand-200: #8edce1;
  --brand-300: #54cbd2;
  --brand-400: #00b7c3;
  --brand-500: #009ba6;
  --brand-600: #008089;
  --brand-700: #00666d;
  --brand-800: #005158;
  --brand-900: #003d42;

  /* Secondary chrome follows the Dynamics slate while the accent keeps the
   * cyan product signature visible against it. */
  --chrome:        #505c6d;
  --chrome-accent: #00b7c3;
  --chrome-text:   rgba(255, 255, 255, .78);
  --chrome-muted:  rgba(255, 255, 255, .45);
  --chrome-line:   rgba(255, 255, 255, .08);
  --chrome-hover:  rgba(255, 255, 255, .07);
  --chrome-active: rgba(255, 255, 255, .12);

  /* ---- neutrals: Microsoft Fluent neutral ramp -------------------------- */
  --n-0:   #ffffff;
  --n-25:  #faf9f8;
  --n-50:  #f3f2f1;
  --n-100: #edebe9;
  --n-150: #e1dfdd;
  --n-200: #d2d0ce;
  --n-300: #c8c6c4;
  --n-400: #a19f9d;
  --n-500: #605e5c;
  --n-600: #484644;
  --n-700: #3b3a39;
  --n-800: #323130;
  --n-900: #201f1e;

  /* ---- semantic ---------------------------------------------------------
   * pos/neg are the ledger's credit/debit pair, not merely "success/error".
   */
  --pos-50:  #dff6dd;
  --pos-200: #9fd89f;
  --pos-300: #88ce81;
  --pos-600: #107c10;
  --pos-700: #0b5a0b;

  --neg-50:  #fde7e9;
  --neg-200: #f1bbbc;
  --neg-600: #a4262c;
  --neg-700: #7a171c;

  --warn-50:  #fff4ce;
  --warn-200: #e6d979;
  --warn-600: #986f0b;
  --warn-700: #6b4f00;

  /* Informational blue stays separate from both brand teal and favorable
   * green, matching the Business Central style categories. */
  --info-50:  #eff6fc;
  --info-200: #b3d6f2;
  --info-600: #0078d4;
  --info-700: #005a9e;

  /* ---- financial column group -------------------------------------------
   * A run of money columns is tinted so it reads as one block — the financial
   * position of a row — rather than as several unrelated figures sharing a
   * table. The tint is deliberately weak: it groups, it does not highlight.
   * Anything stronger and every row looks like an exception, which is exactly
   * the signal these screens must keep in reserve for rows that are.
   */
  --fin-bg:       #f0f8f9;
  --fin-bg-hover: #e3f2f4;
  --fin-border:   var(--brand-100);
  --fin-head:     var(--brand-700);

  /* ---- surfaces ---------------------------------------------------------- */
  --bg-app:      var(--n-50);
  --bg-surface:  var(--n-0);
  --bg-sunken:   var(--n-100);
  --bg-hover:    var(--n-50);
  --bg-selected: var(--brand-50);

  --border:        var(--n-200);
  /* Short aliases a few component rules reach for. */
  --line:          var(--border);
  --surface:       var(--bg-surface);
  --surface-2:     var(--bg-sunken);
  --muted:         var(--n-600);
  --border-strong: var(--n-300);

  --text:        var(--n-800);
  --text-muted:  var(--n-600);
  --text-subtle: var(--n-500);
  --text-invert: var(--n-0);

  /* ---- type -------------------------------------------------------------
   * 14px base. Headings stay small on purpose: a 40px page title costs a row
   * of data on a screen someone reads for seven hours.
   */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Reserved for figures that carry a decision — a balance, a KPI, an amount
   * on a receipt. Weight is how this product gets its authority, because
   * size cannot: a 40px page title costs a row of data on a screen somebody
   * reads for seven hours.
   */
  --fw-heavy: 800;

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---- space: 4px grid --------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- shape ------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Two shadows only: a hairline at rest, a lift for overlays. */
  --shadow-sm: 0 1px 2px rgba(22, 27, 34, .06);
  --shadow-md: 0 1px 3px rgba(22, 27, 34, .08), 0 4px 12px rgba(22, 27, 34, .06);
  --shadow-lg: 0 8px 28px rgba(22, 27, 34, .16);

  /* ---- layout ------------------------------------------------------------ */
  --rail-w: 240px;
  --rail-w-expanded: 240px;
  --rail-w-collapsed: 56px;
  --topbar-h: 52px;
  --content-max: 1480px;

  /* ---- motion: functional only ------------------------------------------- */
  --ease: cubic-bezier(.2, 0, .2, 1);
  --dur-fast: 90ms;
  --dur: 150ms;

  --focus-ring: 0 0 0 2px var(--n-0), 0 0 0 4px var(--brand-600);

  --z-rail: 20;
  --z-topbar: 30;
  --z-drawer: 60;
  --z-dialog: 70;
  --z-toast: 80;
}

/* Density is a user preference; the rail toggle writes this attribute. */
:root[data-density="compact"] {
  --row-py: 5px;
  --control-h: 28px;
}
:root,
:root[data-density="comfortable"] {
  --row-py: 9px;
  --control-h: 34px;
}

/* Dark mode ---------------------------------------------------------------
 * A low-glare Business Central palette shared by the Office and Driver
 * surfaces. Green, red, yellow and blue remain reserved for semantic states.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-50:  #10282b;
  --brand-100: #143a3e;
  --brand-200: #17545a;
  --brand-300: #23747c;
  --brand-400: #008f99;
  --brand-500: #00a2ad;
  --brand-600: #00b7c3;
  --brand-700: #4ccbd4;
  --brand-800: #80dce2;
  --brand-900: #c5f3f5;

  --chrome:        #11191b;
  --chrome-accent: #00b7c3;
  --chrome-text:   #c8c6c4;
  --chrome-muted:  #797775;
  --chrome-line:   #303638;
  --chrome-hover:  #1c2729;
  --chrome-active: #123b3f;

  --n-0:   #ffffff;
  --n-25:  #151819;
  --n-50:  #1b1e1f;
  --n-100: #222627;
  --n-150: #292d2e;
  --n-200: #323738;
  --n-300: #484d4e;
  --n-400: #797775;
  --n-500: #a19f9d;
  --n-600: #c8c6c4;
  --n-700: #d2d0ce;
  --n-800: #f3f2f1;
  --n-900: #ffffff;

  --pos-50:  #142515;
  --pos-200: #315f2c;
  --pos-300: #88ce81;
  --pos-600: #72c968;
  --pos-700: #9fe799;

  --neg-50:  #2b191b;
  --neg-200: #74383d;
  --neg-600: #e97768;
  --neg-700: #ff9c91;

  --warn-50:  #292817;
  --warn-200: #66642f;
  --warn-600: #c9c472;
  --warn-700: #e9e58e;

  --info-50:  #172331;
  --info-200: #315270;
  --info-600: #75b5e7;
  --info-700: #9bc8ec;

  --fin-bg:       #132224;
  --fin-bg-hover: #183033;
  --fin-border:   #23545a;
  --fin-head:     #75d8e7;

  --bg-app:      #101415;
  --bg-surface:  #191d1e;
  --bg-sunken:   #141819;
  --bg-hover:    #202627;
  --bg-selected: #10282b;

  --border:        #303638;
  --line:          var(--border);
  --surface:       var(--bg-surface);
  --surface-2:     var(--bg-sunken);
  --muted:         #c8c6c4;
  --border-strong: #484d4e;

  --text:        #f3f2f1;
  --text-muted:  #c8c6c4;
  --text-subtle: #a19f9d;
  --text-invert: #07191b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .34);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .48);

  --focus-ring: 0 0 0 2px #101415, 0 0 0 4px #00b7c3;
}

/* Portal geometry must not change when the user changes colour mode. */
:root[data-portal="office"] {
  --rail-w: 236px;
  --rail-w-expanded: 236px;
  --topbar-h: 60px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honour a forced-colours environment rather than fighting it. */
@media (forced-colors: active) {
  .btn,
  .badge,
  .card {
    border: 1px solid ButtonBorder;
  }
}

/* ═══════════════════════════════════════════════════ the cardholder app
   `/me` is a consumer product on a driver's own phone, not an operator's
   console and not the forecourt handheld. It inherited the terminal's
   palette, which was tuned for a gloved thumb in the rain: heavy panels,
   flat greys, no depth. What a driver needs from a money app is different —
   one figure they can read at arm's length, one obvious action, and enough
   quiet around both to trust it.

   Scoped to `[data-portal="me"]` so nothing here can reach the desk portals,
   and so this is the only block to touch when the app is re-tinted. It is
   also the only surface in the platform with a dark mode: a phone has a
   system setting and a driver checking a balance at night is a real person,
   where an operator at a desk in daylight is not asking for one. */

[data-portal="me"] {
  --me-ground:       #f4f7f5;
  --me-surface:      #ffffff;
  --me-surface-2:    #eef3f0;
  --me-sunk:         #e7eeea;
  --me-line:         #dfe7e2;
  --me-line-strong:  #c4d3cb;

  --me-ink:          #0c1a13;
  --me-ink-2:        #4a6155;
  --me-ink-3:        #647d70;

  --me-accent:       #157347;
  --me-accent-deep:  #0f5c39;
  --me-accent-ink:   #ffffff;
  --me-accent-soft:  #e6f2ec;

  /* Approval is green because the brand is green and, in a consumer app, an
     approved fill genuinely is the good outcome. Refusal is the one place
     that needs a different hue, and it is never carried by colour alone —
     every declined row also says the word. */
  --me-ok:           #14663f;
  --me-ok-soft:      #e6f2ec;
  --me-bad:          #a4231c;
  --me-bad-soft:     #fbeceb;
  --me-warn:         #855400;
  --me-warn-soft:    #fdf3e2;

  --me-scrim:        rgba(12, 26, 19, .42);
  --me-elev:         0 1px 2px rgba(12, 26, 19, .06),
                     0 6px 20px -12px rgba(12, 26, 19, .18);
  --me-elev-lift:    0 2px 4px rgba(12, 26, 19, .08),
                     0 14px 32px -14px rgba(12, 26, 19, .26);

  --me-r:            14px;
  --me-r-sm:         10px;
  --me-r-lg:         20px;
  --me-r-pill:       999px;

  /* 44px is the floor a thumb needs and the floor WCAG asks for. Named, so
     it cannot be quietly undercut by a component that looks tidier smaller. */
  /* Fixed in both themes. A QR is read by a camera expecting dark-on-light,
     so this one surface does not follow the phone into dark mode. */
  --me-qr-ground:    #ffffff;
  --me-qr-ink:       #0b0f0d;

  --me-tap:          44px;
  --me-gutter:       16px;
  --me-max:          560px;
}

@media (prefers-color-scheme: dark) {
  [data-portal="me"] {
    --me-ground:       #0a1310;
    --me-surface:      #121d18;
    --me-surface-2:    #18241e;
    --me-sunk:         #0e1814;
    --me-line:         #23332b;
    --me-line-strong:  #35493e;

    --me-ink:          #e9f2ed;
    --me-ink-2:        #b0c4ba;
    --me-ink-3:        #87a094;

    --me-accent:       #4fc98f;
    --me-accent-deep:  #7bdcae;
    --me-accent-ink:   #04261a;
    --me-accent-soft:  #12291f;

    --me-ok:           #6dd3a1;
    --me-ok-soft:      #12291f;
    --me-bad:          #ef9b95;
    --me-bad-soft:     #2c1614;
    --me-warn:         #e0b268;
    --me-warn-soft:    #291f10;

    --me-scrim:        rgba(0, 0, 0, .6);
    --me-elev:         0 1px 2px rgba(0, 0, 0, .5);
    --me-elev-lift:    0 8px 28px -12px rgba(0, 0, 0, .7);
    /* --me-qr-ground and --me-qr-ink deliberately do not change. */
  }
}