//
// Dark mode — a palette swap: custom properties only, no rule of its own.
//
// TRADE-OFF this PR does not pay off: the tokens keep their --light suffix, so
// dark mode re-points every --light name at a dark value under body.theme-dark
// instead of the pairing the suffixes are meant to end in —
//   .theme-light { --background--blue-low-default: var(--background--blue-low-default--light) }
//   .theme-dark  { --background--blue-low-default: var(--background--blue-low-default--dark) }
// Removing the suffixes touches every component in the design system, which is
// its own change; until then this file is the switch.
//
// The generated --dark ramp is not used: it is the light ramp with its steps
// inverted (black surfaces, white cards, navy accents), and the DS rules that
// read --*--dark as "the label on a filled control" depend on it staying put.
//

// Palette — measured off the designer's dark frame. Layer A consumes these as
// hex, Layer B as RGB triples.
@d-desk: #151412; // page behind the panel
@d-rail: #161513; // sidebar, recessed banner
@d-surface: #201f1d; // card, row, bar — the plane content lives on
@d-trough: #10100e; // the one fill below the desk: the tab strip
@d-raised: #2a2927; // hover
@d-raised-high: #302f2c; // selected nav item
@d-band: #363330; // table header/footer band, section band
@d-line: #3a3937; // container hairline
@d-line-high: #58574f; // row rule, quiet button frame
@d-frame: #b8b5a3; // field frame: the outline of a control, 8:1 on the card
@d-frame-hover: #cbc8b2; // field frame hover: the outline of a control on hover

@d-ink: #f1f0ee; // body copy, icons
@d-ink-bright: #ffffff; // headings, hover
@d-ink-2: #aaa49c; // secondary text, column labels
@d-ink-3: #958c83; // muted text
@d-ink-4: #6f6b67; // disabled

// Fills keep the brand blue; blue INK climbs to a light step (#0058d4 on
// #201f1d is 2.4:1).
@d-blue: #006bff;
@d-blue-hover: #2a80ff;
@d-blue-deep: #0057d6;
@d-blue-ink: #3d8afe; // the designer's icon/link ink
@d-blue-ink-hover: #6ca7ff;
@d-blue-tint: #1a2e4a;
@d-blue-tint-hover: #0d4ca6;
@d-blue-tint-ink: #c9dfff; // the designer's icon/link ink
@d-blue-tint-ink-hover: #fff;
@d-blue-pale: #101c2b;

// State fills carry white labels; the ink and tint steps are for dark surfaces.
@d-green: #02b646;
@d-green-ink: #4ad07f;
@d-green-tint: #193725;
@d-amber: #f6af00;
@d-amber-ink: #ffc24d;
@d-amber-tint: #332608;
@d-critical: #e5453a;
@d-critical-hover: #c8362c;
@d-critical-ink: #ff8f85;
@d-critical-tint: #33130d;
@d-notice-ink: #7db4ff;
@d-superadmin: #b283ff;
@d-superadmin-hover: #9d68f5;

body.theme-dark {
  --colors-interactive-primary-enabled: @d-blue;
  --colors-interactive-primary-hover: @d-blue-hover;
  --colors-interactive-primary-disabled: @d-ink-4;
  --colors-interactive-focus-primary: @d-blue;
  --colors-interactive-action-enabled: @d-blue;
  --colors-interactive-action-hover: @d-blue-hover;
  --colors-interactive-action-disabled: @d-ink-4;

  // Interactive — secondary, tertiary, ghost (content-primary is the label ON
  // a filled control, so it stays white).
  --colors-interactive-content-primary: @d-ink-bright;
  --colors-interactive-content-secondary: @d-ink;
  --colors-interactive-secondary-enabled: @d-ink-2;
  --colors-interactive-secondary-hover: @d-ink;
  --colors-interactive-secondary-activated: @d-blue-ink;
  --colors-interactive-secondary-disabled: @d-ink-4;
  --colors-interactive-tertiary-enabled: @d-ink;
  --colors-interactive-tertiary-hover: @d-ink-bright;
  --colors-interactive-tertiary-activated: @d-blue-ink;
  --colors-interactive-tertiary-disabled: #ffffff80;
  --colors-interactive-ghost-enabled: @d-surface;
  --colors-interactive-ghost-hover: @d-raised;
  --colors-interactive-ghost-activated: @d-ink;
  --colors-interactive-ghost-activated-hover: @d-ink-bright;
  --colors-interactive-ghost-subtle: @d-blue-tint;
  --colors-interactive-ghost-subtle-hover: @d-blue-tint-hover;
  --colors-interactive-destructive-enabled: @d-critical;
  --colors-interactive-destructive-hover: @d-critical-hover;
  --colors-interactive-destructive-disabled: @d-ink-4;
  --colors-interactive-links-enabled: @d-blue-ink;
  --colors-interactive-links-hover: @d-blue-ink-hover;
  --colors-interactive-links-disabled: #579dff26;
  --colors-interactive-tabs-border: transparent;
  --colors-interactive-tabs-background-enabled: @d-trough;
  --colors-interactive-tabs-background-hover: @d-blue;
  --colors-interactive-tabs-background-selected: @d-blue;
  --colors-interactive-tabs-selected-indicator: @d-blue;
  --colors-interactive-tabs-strip: @d-trough;
  --colors-interactive-loader-light-background: @d-blue-tint;
  --colors-interactive-loader-light-foregrounds: @d-blue-ink;
  --colors-interactive-loader-dark-background: #ffffff0d;
  --colors-interactive-loader-dark-foregrounds: @d-ink;
  --colors-interactive-superadmin-enabled: @d-superadmin;
  --colors-interactive-superadmin-hover: @d-superadmin-hover;
  --colors-interactive-superadmin-activated: @d-superadmin-hover;
  --colors-surface-primary: @d-desk;
  --colors-surface-secondary: @d-surface;
  --colors-surface-tertiary: @d-surface;
  --colors-surface-light-gray: @d-band;
  --colors-surface-light-blue: @d-blue-pale;
  // The inverted surface stays dark: its only consumers are the legacy tooltip
  // chips (tooltip.less:7, the order hover block, #preview), which carry the
  // inverted ink — and that ink has to be white, because everything else reading
  // it sits on a colour (the dashboard's active tile, the state pills, the bar).
  --colors-surface-inverted: @d-band;
  --colors-surface-overlay: #0009;
  --colors-tables-backgrounds-primary: @d-surface;
  --colors-tables-backgrounds-secondary: @d-surface;
  --colors-tables-backgrounds-tertiary: @d-band;
  --colors-tables-border-primary: @d-line;
  --colors-tables-border-secondary: @d-blue;
  --colors-tables-states-success: @d-green-tint;
  --colors-tables-states-warning: @d-amber-tint;
  --colors-tables-states-critical: @d-critical-tint;
  --colors-tables-states-notice: @d-blue-pale;
  --colors-sidebar-backgrounds-enabled: @d-rail;
  --colors-sidebar-backgrounds-hover: @d-raised;
  --colors-sidebar-backgrounds-activated: @d-raised-high;
  --colors-sidebar-content-enabled: @d-ink;
  --colors-sidebar-content-activated: @d-ink;
  --colors-sidebar-content-disabled: @d-ink-4;
  --colors-header-background: @d-surface;
  --colors-lists-background-enabled: @d-surface;
  --colors-lists-background-hover: @d-raised;
  --colors-lists-background-activated: @d-blue-tint;
  --colors-lists-content-enabled: @d-ink;
  --colors-lists-content-activated: @d-blue-ink;
  --colors-lists-content-disabled: @d-ink-4;
  --colors-foregrounds-content-primary: @d-ink;
  --colors-foregrounds-content-secondary: @d-ink-2;
  --colors-foregrounds-content-tertiary: @d-ink-3;
  --colors-foregrounds-content-inverted: @d-ink-bright;
  --colors-foregrounds-headlines-primary: @d-ink-bright;
  --colors-foregrounds-headlines-secondary: @d-ink;
  --colors-foregrounds-headlines-tertiary: @d-ink;
  --colors-foregrounds-icons-primary: @d-ink;
  --colors-foregrounds-icons-secondary: @d-ink-3;
  --colors-foregrounds-icons-tertiary: @d-ink-bright;
  --colors-foregrounds-borders-primary: @d-line;
  --colors-foregrounds-borders-secondary: @d-line-high;
  --colors-forms-background: @d-surface;
  --colors-forms-border: @d-line-high;
  --colors-forms-activated: @d-blue;
  --colors-forms-shadow: @d-blue;
  --colors-forms-critical: @d-critical;
  --colors-forms-warning: @d-amber;
  --colors-forms-disabled: @d-raised;
  --colors-states-primary-success: @d-green;
  --colors-states-primary-alert: @d-amber;
  --colors-states-primary-error: @d-critical;
  --colors-states-primary-notice: @d-blue;
  --colors-states-primary-informative: @d-blue-deep;
  --colors-states-primary-default: @d-ink-3;
  --colors-states-secondary-success: @d-green-tint;
  --colors-states-secondary-alert: @d-amber-tint;
  --colors-states-secondary-error: @d-critical-tint;
  --colors-states-secondary-notice: @d-blue-pale;
  --colors-states-secondary-informative: @d-blue-tint;
  --colors-states-secondary-default: @d-raised;
  --colors-code-snippet-background: @d-blue-pale;
  --colors-code-snippet-border: @d-blue-tint-hover;
  --effect-box-shadow-shadow-focus: 0 0 0 3px rgb(0 107 255 / 45%);
  --effect-box-shadow-shadow-down: 0 2px 16px 0 rgb(0 0 0 / 45%);
  --background--controls-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --background--controls-medium-hovered--light: red(@d-blue-hover) green(@d-blue-hover) blue(@d-blue-hover);
  --background--controls-medium-selected--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --background--controls-low-default--light: red(@d-blue-tint) green(@d-blue-tint) blue(@d-blue-tint);
  --background--controls-low-hovered--light: red(@d-blue-tint-hover) green(@d-blue-tint-hover) blue(@d-blue-tint-hover);
  --background--blue-low-default--light: red(@d-blue-pale) green(@d-blue-pale) blue(@d-blue-pale);
  --background--main-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --background--main-medium-hovered--light: red(@d-blue-hover) green(@d-blue-hover) blue(@d-blue-hover);
  --background--main-medium-selected--light: red(@d-blue) green(@d-blue) blue(@d-blue);

  // The neutral ramp from the dark end: base is the card, full the modal scrim
  // (composes at 60%, so black), strong the tooltip chip (white label on it).
  --background--neutral-base-default--light: red(@d-surface) green(@d-surface) blue(@d-surface);
  --background--neutral-low-default--light: red(@d-band) green(@d-band) blue(@d-band);
  --background--neutral-low-hovered--light: red(@d-raised-high) green(@d-raised-high) blue(@d-raised-high);
  --background--neutral-high-default--light: red(@d-raised) green(@d-raised) blue(@d-raised);
  --background--neutral-strong-default--light: red(@d-band) green(@d-band) blue(@d-band);
  --background--neutral-full-default--light: 0 0 0;
  --background--success-low-default--light: red(@d-green-tint) green(@d-green-tint) blue(@d-green-tint);
  --background--success-high-default--light: red(@d-green) green(@d-green) blue(@d-green);
  --background--warning-low-default--light: red(@d-amber-tint) green(@d-amber-tint) blue(@d-amber-tint);
  --background--warning-medium-default--light: red(@d-amber) green(@d-amber) blue(@d-amber);
  --background--critical-low-default--light: red(@d-critical-tint) green(@d-critical-tint) blue(@d-critical-tint);
  --background--critical-high-default--light: red(@d-critical) green(@d-critical) blue(@d-critical);
  --background--critical-high-hovered--light: red(@d-critical-hover) green(@d-critical-hover) blue(@d-critical-hover);
  --background--critical-xHigh-default--light: red(@d-critical) green(@d-critical) blue(@d-critical);
  --background--informative-low-default--light: red(@d-blue-pale) green(@d-blue-pale) blue(@d-blue-pale);
  --background--informative-xHigh-default--light: red(@d-blue-deep) green(@d-blue-deep) blue(@d-blue-deep);
  --background--notice-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --foreground--neutral-full-default--light: red(@d-ink) green(@d-ink) blue(@d-ink);
  --foreground--neutral-full-hovered--light: red(@d-ink-bright) green(@d-ink-bright) blue(@d-ink-bright);
  --foreground--neutral-high-default--light: red(@d-ink-2) green(@d-ink-2) blue(@d-ink-2);
  --foreground--neutral-medium-default--light: red(@d-ink-3) green(@d-ink-3) blue(@d-ink-3);
  --foreground--neutral-low-default--light: red(@d-ink-4) green(@d-ink-4) blue(@d-ink-4);
  --foreground--blue-medium-default--light: red(@d-ink-bright) green(@d-ink-bright) blue(@d-ink-bright);
  --foreground--green-medium-default--light: red(@d-ink) green(@d-ink) blue(@d-ink);
  --foreground--controls-medium-default--light: red(@d-blue-ink) green(@d-blue-ink) blue(@d-blue-ink);
  --foreground--controls-medium-hovered--light: red(@d-blue-ink-hover) green(@d-blue-ink-hover) blue(@d-blue-ink-hover);
  --foreground--controls-medium-selected--light: red(@d-blue-ink) green(@d-blue-ink) blue(@d-blue-ink);
  --foreground--links-strong-default--light: red(@d-blue-ink) green(@d-blue-ink) blue(@d-blue-ink);
  --foreground--links-strong-hovered--light: red(@d-blue-ink-hover) green(@d-blue-ink-hover) blue(@d-blue-ink-hover);
  --foreground--main-medium-default--light: red(@d-blue-ink) green(@d-blue-ink) blue(@d-blue-ink);
  --foreground--main-medium-hovered--light: red(@d-blue-ink-hover) green(@d-blue-ink-hover) blue(@d-blue-ink-hover);
  --foreground--superadmin-high-default--light: red(@d-superadmin) green(@d-superadmin) blue(@d-superadmin);
  --foreground--superadmin-high-hovered--light: red(@d-superadmin-hover) green(@d-superadmin-hover)
    blue(@d-superadmin-hover);
  --foreground--success-high-default--light: red(@d-green-ink) green(@d-green-ink) blue(@d-green-ink);
  --foreground--warning-medium-default--light: red(@d-amber-ink) green(@d-amber-ink) blue(@d-amber-ink);
  --foreground--notice-medium-default--light: red(@d-notice-ink) green(@d-notice-ink) blue(@d-notice-ink);
  --foreground--critical-high-default--light: red(@d-critical-ink) green(@d-critical-ink) blue(@d-critical-ink);
  --foreground--critical-high-hovered--light: red(@d-critical-ink) green(@d-critical-ink) blue(@d-critical-ink);
  --foreground--informative-strong-default--light: red(@d-notice-ink) green(@d-notice-ink) blue(@d-notice-ink);
  --border--neutral-low-default--light: red(@d-line) green(@d-line) blue(@d-line);
  --border--neutral-medium-default--light: red(@d-line-high) green(@d-line-high) blue(@d-line-high);
  --border--neutral-high-default--light: red(@d-line) green(@d-line) blue(@d-line);
  --border--neutral-full-hovered--light: red(@d-ink-2) green(@d-ink-2) blue(@d-ink-2);
  --border--controls-low-default--light: red(@d-blue-tint-hover) green(@d-blue-tint-hover) blue(@d-blue-tint-hover);
  --border--controls-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --border--controls-medium-hovered--light: red(@d-blue-hover) green(@d-blue-hover) blue(@d-blue-hover);
  --border--controls-medium-selected--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --border--blue-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --border--links-strong-default--light: red(@d-blue-ink) green(@d-blue-ink) blue(@d-blue-ink);
  --border--main-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --border--main-medium-hovered--light: red(@d-blue-hover) green(@d-blue-hover) blue(@d-blue-hover);
  --border--success-high-default--light: red(@d-green) green(@d-green) blue(@d-green);
  --border--warning-medium-default--light: red(@d-amber) green(@d-amber) blue(@d-amber);
  --border--critical-high-default--light: red(@d-critical) green(@d-critical) blue(@d-critical);
  --border--critical-high-hovered--light: red(@d-critical-hover) green(@d-critical-hover) blue(@d-critical-hover);
  --border--informative-strong-default--light: red(@d-blue-deep) green(@d-blue-deep) blue(@d-blue-deep);
  --border--notice-medium-default--light: red(@d-blue) green(@d-blue) blue(@d-blue);
  --shadow--focus--light: 0 0 0 3px rgb(0 107 255 / 45%);
  --shadow--high-sharp--light: 0 2px 16px 0 rgb(0 0 0 / 45%);

  // ------------------------------------------------------------------
  // Theme knobs — the brand theme's component colours
  // ------------------------------------------------------------------
  --brand-table-hairline: red(@d-line-high) green(@d-line-high) blue(@d-line-high);
  // A field frame is the control's outline, not a hairline: at the row-rule step it
  // measured 2.3:1 against the card where light mode has 3.2:1 against white.
  --brand-field-frame: red(@d-frame) green(@d-frame) blue(@d-frame);
  --brand-field-frame-hover: red(@d-frame-hover) green(@d-frame-hover) blue(@d-frame-hover);
  // The mirrored fill is light, so its label is the card, not white.
  --brand-ghost-activated-ink: @d-surface;
  --brand-card-fill: red(@d-raised) green(@d-raised) blue(@d-raised);
  --brand-perex-fill: 0 22 56; // designer's 001638
  --brand-btn-quiet-frame: red(@d-line-high) green(@d-line-high) blue(@d-line-high);
  // The tinted tier mirrors light's blue tint: as a raised neutral it read like a
  // quiet button and the mid-level CTAs disappeared.
  --brand-btn-tinted-fill: red(@d-blue-tint) green(@d-blue-tint) blue(@d-blue-tint);
  --brand-btn-tinted-fill-hovered: red(@d-blue-tint-hover) green(@d-blue-tint-hover) blue(@d-blue-tint-hover);
  --brand-btn-tinted-ink: red(@d-blue-tint-ink) green(@d-blue-tint-ink) blue(@d-blue-tint-ink);
  --brand-btn-tinted-ink-hovered: red(@d-blue-tint-ink-hover) green(@d-blue-tint-ink-hover) blue(@d-blue-tint-ink-hover);
  // The overlays invert with the surface: black on black is nothing.
  --brand-overlay-row-hover: 255 255 255 / 6%;
  --brand-overlay-page-hover: 255 255 255 / 8%;
  --brand-shop-pill-fill: 255 255 255 / 10%;
  // Cyan artwork: brightness(0) makes it black, the invert takes it to white.
  --brand-img-ink: brightness(0) invert(1);
  --brand-caret: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.00011 7.93933L12.0001 15.9393L20.0001 7.93933L21.0608 8.99999L12.0001 18.0607L2.93945 8.99999L4.00011 7.93933Z' fill='%23f1f0ee'/%3E%3C/svg%3E");
  --brand-bar-shadow-up: 0 -1px 0 rgb(255 255 255 / 10%), 0 -8px 24px rgb(0 0 0 / 50%);
  // The one recessed input: it sits in the bar, not on the card.
  --brand-search-fill: red(@d-desk) green(@d-desk) blue(@d-desk);
  --brand-control-ink: red(@d-ink) green(@d-ink) blue(@d-ink);

  // The merchant's header colour is their brand, so it survives the theme switch;
  // only the "no pick" default follows it (header.tpl emits --user-color solely for
  // a pick, and the ink staircase reads this knob as its fallback).
  --brand-header-fill: @d-surface;
  // The only non-custom-property here: it colours what no rule reaches — a
  // UA input fill, the native select popup, the date picker, autofill.
  color-scheme: dark;
}