/*
 * The MyEBS look, in one place (owner 2026-10-30): every app (desktop, web, phone, website, admin panel) loads this
 * file and uses only these variables for colours, corners, shadows and the font. Change a colour here and it changes
 * everywhere. brand.ts holds the same values for code that draws (bills, QR codes, charts); tests/brand.test.mts
 * checks the two agree and that stylesheets do not bring their own colours.
 *
 * The values are the desktop app's (src/theme.css until 2026-10-30), which follow the logo: blue to violet.
 */
:root {
  /* The logo and the product name. */
  --brand-blue: #2563eb;
  --brand-violet: #7c3aed;
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --brand-name: #3153df;
  --brand-glow: 0 10px 20px rgb(55 75 210 / 20%);
  /* The sign-in pages' panel: deep navy to indigo to violet. */
  --brand-gradient-deep: linear-gradient(145deg, #17244b 0%, #283e85 58%, #6655c7 100%);

  /* Actions and states: each with a hover shade and a soft background. */
  --ui-primary: #4355bd;
  --ui-primary-hover: #35469f;
  --ui-primary-soft: #eef1ff;
  --ui-secondary: #5f6f82;
  --ui-secondary-hover: #4c5b6c;
  --ui-secondary-soft: #eef1f4;
  --ui-accent: #7357c7;
  --ui-accent-hover: #5f45ae;
  --ui-accent-soft: #f2edff;
  --ui-success: #25835b;
  --ui-success-hover: #1d6b49;
  --ui-success-soft: #eaf7f0;
  --ui-danger: #c13f4d;
  --ui-danger-hover: #a6313d;
  --ui-danger-soft: #fff0f2;
  --ui-warning: #aa6b00;
  --ui-warning-hover: #8c5700;
  --ui-warning-soft: #fff6df;
  --ui-info: #147d9b;
  --ui-info-hover: #106780;
  --ui-info-soft: #e9f7fb;
  --ui-happy: #b34684;
  --ui-happy-hover: #96366d;
  --ui-happy-soft: #fceefa;
  /* Something that needs the owner's eye now (an update to install): bright amber. */
  --ui-alert: #f59e0b;
  --ui-alert-hover: #e48f05;
  --ui-alert-soft: #fff7e3;
  --ui-alert-border: #f1c267;
  --ui-alert-text: #8a5300;
  --ui-alert-on: #3b2300;

  /* Text, lines and surfaces. */
  --ui-text: #17243a;
  --ui-text-strong: #111827;
  --ui-muted: #6a7b8c;
  --ui-faint: #8a96a5;
  --ui-text-soft: #50657a;
  --ui-hint: #6c757d;
  --ui-border-strong: #8190a1;
  --ui-disabled-text: #8b97a4;
  --ui-disabled-bg: #f1f4f7;
  --ui-readonly-text: #526174;
  --ui-readonly-bg: #f7f9fb;
  --ui-border: #ced4da;
  --ui-border-soft: #dfe5ec;
  --ui-focus: rgb(112 91 214 / 18%);
  --ui-focus-border: #8071dc;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f6f8fb;
  --ui-overlay: rgb(15 23 42 / 45%);
  --ui-on-color: #ffffff;

  /* The sidebar: white, with the logo, dark text and grey icons; the open page in the brand indigo (owner 2026-10-31). */
  --ui-sidebar: #ffffff;
  --ui-sidebar-border: #d7e0e8;
  --ui-nav-text: #202124;
  --ui-nav-icon: #6d6d6d;
  --ui-nav-heading: #8a96a5;
  --ui-nav-hover: #eef1f5;
  --ui-nav-active: #eef1ff;
  --ui-nav-active-text: #35469f;
  --ui-nav-active-icon: #4355bd;
  /* Colours for icons outside the sidebar (phone tiles, admin panel). */
  --ui-icon-indigo: #5868da;
  --ui-icon-blue: #3978ca;
  --ui-icon-green: #249568;
  --ui-icon-emerald: #168665;
  --ui-icon-amber: #b87a1e;
  --ui-icon-orange: #d66a25;
  --ui-icon-violet: #8754c6;
  --ui-icon-cyan: #1989a8;
  --ui-icon-teal: #268b8f;
  --ui-icon-rose: #d85267;
  --ui-icon-slate: #52657a;

  /* Shape and depth. */
  --ui-radius-sm: 4px;
  --ui-radius: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 10px;
  --ui-radius-pill: 999px;
  /* Shadows are this ink at a low strength: color-mix(in srgb, var(--ui-shadow-ink) 6%, transparent). */
  --ui-shadow-ink: #142346;
  --ui-shadow-card: 0 3px 12px rgb(26 45 68 / 4%);
  --ui-shadow-pop: 0 12px 24px rgb(15 23 42 / 14%);

  /* Type. */
  --ui-font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, Roboto, sans-serif;
  --ui-font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  /*
   * Standard sizes (owner 2026-10-31): every button, input, card and text size comes from this short list, so each
   * screen looks like the others. The values are the desktop's (src/theme.css). tests/sizes.test.mts keeps the web
   * app to them.
   */
  /* Text: one scale. */
  --ui-fs-xs: 11px;      /* table headings, badges, small print */
  --ui-fs-sm: 12px;      /* hints and secondary lines */
  --ui-fs: 13px;         /* body, labels, inputs, buttons, table rows */
  --ui-fs-md: 14px;      /* card titles, the sidebar */
  --ui-fs-lg: 16px;      /* dialog titles, a value that matters */
  --ui-fs-xl: 20px;      /* page titles */
  --ui-fs-figure: 24px;  /* key figures: metrics, the grand total */
  --ui-fs-hero: 34px;    /* the one big number on a page */
  /* Buttons, inputs and dropdowns: three heights. Small is for tables and tight rows; large for the main action. */
  --ui-control-sm: 30px;
  --ui-control: 36px;
  --ui-control-lg: 42px;
  --ui-control-pad: 14px;     /* a button's sides */
  --ui-control-pad-sm: 10px;  /* a small button's and every input's sides */
  /* Space: steps of 4. */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  /* Cards: one padding; side panels and dialogs inside tight layouts use the compact one. Cards sit --ui-gap apart. */
  --ui-card-pad: 20px;
  --ui-card-pad-sm: 16px;
  --ui-gap: 16px;
  --ui-page-pad: 28px;  /* the page's left and right margin */
  /* Icons: in buttons and text, and in the sidebar. */
  --ui-icon: 16px;
  --ui-icon-nav: 18px;
}