/*
 * Design tokens — the single source of colour, type, spacing and elevation.
 *
 * Identity: a freight ledger. Cool paper surfaces, ink text, hairline rules,
 * and DIN-style numerals (the lettering of carton marks and shipping labels)
 * for every figure a seller compares. The brand colour is deliberately blue:
 * green, red and amber are reserved for profit, loss and caution, so the
 * interface never competes with the numbers it reports.
 *
 * Component styles must use these variables. Raw colour values belong only in
 * this file.
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --canvas: #f2f4f7;
  --surface: #ffffff;
  --soft: #f6f7fa;
  --sunken: #eceff4;
  --overlay: rgba(16, 24, 40, .48);

  /* Text */
  --ink: #111a2c;
  --ink-2: #2f3a4f;
  --muted: #586478;
  --faint: #8792a5;

  /* Rules */
  --line: #e2e6ed;
  --line-strong: #c6cdd9;

  /* Brand (ultramarine stamp ink) */
  --brand: #2c44c4;
  --brand-hover: #2236a3;
  --brand-dark: #1b2b85;
  --brand-soft: #ecefff;
  --brand-line: #c3cbf6;
  --on-brand: #ffffff;
  --focus-ring: rgba(44, 68, 196, .32);

  /* Meaning: reserved for outcomes, never decoration */
  --green: #0a7650;
  --green-soft: #e4f5ed;
  --green-line: #a9dcc5;
  --red: #bd3327;
  --red-soft: #fdecea;
  --red-line: #f0b9b3;
  --amber: #e8960c;
  --amber-strong: #a4570a;
  --amber-soft: #fef4e3;
  --amber-line: #f2cf93;
  --blue: #1a6cb3;
  --blue-soft: #e6f1fa;

  /* Freight modes */
  --mode-sea: #1a6cb3;
  --mode-air: #7446c9;
  --mode-express: #c2570c;

  /* Navigation */
  --nav: #ffffff;
  --nav-ink: #2f3a4f;
  --nav-muted: #7b8698;
  --nav-hover: #f2f4f8;
  --nav-active: var(--brand-soft);
  --nav-active-ink: var(--brand);

  /* Elevation: borders carry structure; shadow is only for things that float */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-md: 0 10px 28px rgba(16, 24, 40, .12);
  --shadow-lg: 0 24px 64px rgba(16, 24, 40, .2);
  --shadow: var(--shadow-sm);

  /* Shape: larger containers get larger radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Type */
  --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-figure: "DIN Alternate", "Bahnschrift", "Roboto Condensed", "Segoe UI Variable Display", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;

  /* Layout */
  --sidebar-width: 236px;
  --topbar-height: 60px;
  --control-height: 36px;
  --page-gutter: clamp(16px, 2.2vw, 32px);

  /* Legacy aliases kept so feature stylesheets written against the previous
     variable names keep working. New code should not use these. */
  --nav-secondary: var(--nav-hover);
  --yellow: var(--brand);
  --yellow-hover: var(--brand-hover);
  --accent: var(--brand);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0d1219;
  --surface: #151c27;
  --soft: #1b2431;
  --sunken: #111823;
  --overlay: rgba(3, 6, 12, .66);

  --ink: #e9edf4;
  --ink-2: #c7cfdc;
  --muted: #9aa6b9;
  --faint: #6f7c91;

  --line: #263142;
  --line-strong: #394760;

  --brand: #93a3ff;
  --brand-hover: #aab7ff;
  --brand-dark: #c2cbff;
  --brand-soft: #1e2850;
  --brand-line: #34427c;
  --on-brand: #0d1330;
  --focus-ring: rgba(147, 163, 255, .4);

  --green: #4fcb9d;
  --green-soft: #11332a;
  --green-line: #1f5a48;
  --red: #ff8f85;
  --red-soft: #3a1b1b;
  --red-line: #6a2c2a;
  --amber: #f3b35c;
  --amber-strong: #f3b35c;
  --amber-soft: #382912;
  --amber-line: #6b4d1e;
  --blue: #6db4ee;
  --blue-soft: #132c42;

  --mode-sea: #6db4ee;
  --mode-air: #b79bf2;
  --mode-express: #f0a368;

  --nav: #111823;
  --nav-ink: #c7cfdc;
  --nav-muted: #7d899d;
  --nav-hover: #1a2331;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .32);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
}

/* Accent presets. The stored setting keeps its historical ids so existing
   accounts and the server-side validation need no migration. */
:root[data-design="sub2api"] {
  --brand: #0c6f78;
  --brand-hover: #095961;
  --brand-dark: #07464c;
  --brand-soft: #e3f4f5;
  --brand-line: #a9d8dc;
  --focus-ring: rgba(12, 111, 120, .32);
}
:root[data-design="sub2api"][data-theme="dark"] {
  --brand: #63cfd8;
  --brand-hover: #86dce3;
  --brand-dark: #a9e8ed;
  --brand-soft: #123a3f;
  --brand-line: #1f5c63;
  --on-brand: #04272b;
  --focus-ring: rgba(99, 207, 216, .4);
}
:root[data-design="olive"] {
  --brand: #26324a;
  --brand-hover: #1a2336;
  --brand-dark: #111827;
  --brand-soft: #e9ecf2;
  --brand-line: #bcc4d3;
  --focus-ring: rgba(38, 50, 74, .32);
}
:root[data-design="olive"][data-theme="dark"] {
  --brand: #d3dae8;
  --brand-hover: #e6ebf4;
  --brand-dark: #f3f5fa;
  --brand-soft: #263042;
  --brand-line: #3c4a63;
  --on-brand: #121a28;
  --focus-ring: rgba(211, 218, 232, .4);
}