/* ============================================================
   Plantain design tokens — the single source of truth.

   Page stylesheets must consume these instead of defining their
   own values. Legacy page-scoped token systems (--loads-*,
   --list-*, --load-board-*) are aliased onto these; new CSS
   should use the global names directly.

   Reference look: the load detail page.
   ============================================================ */

:root {
  /* light-dark() below and in the page stylesheets resolves on this. The dark
     block switches it to dark. */
  color-scheme: light;

  /* --- Ink (text) --- */
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-muted: #64748b;
  --ink-faint: #94a3b8;
  --ink-inverse: #ffffff;

  /* --- Surfaces --- */
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --surface-muted: #f4f7fb;
  --surface-inset: #eef3fb;
  --page-bg: #f6f8fc;

  /* --- Borders --- */
  --border: #dbe4f0;
  --border-strong: #c3d1e2;
  --border-faint: rgba(15, 23, 42, 0.06);

  /* --- Accent (primary action / brand blue) --- */
  --accent: #1f5fb2;
  --accent-hover: #184f98;
  --accent-bright: #3f8fe0;
  --accent-soft: #e4f0ff;
  --accent-border: rgba(31, 95, 178, 0.18);

  /* --- Semantic --- */
  --success: #2f7d4f;
  --success-soft: #eaf6ee;
  --success-border: #cbe8d4;
  --warning: #b45309;
  --warning-soft: #fff8e7;
  --warning-border: rgba(217, 179, 110, 0.4);
  --danger: #b42318;
  --danger-hover: #9a1e15;
  --danger-soft: #fdf1f2;
  --danger-border: rgba(220, 53, 69, 0.25);

  /* --- Load status map (chips, board cards, filters) --- */
  --status-draft: #6c757d;
  --status-draft-soft: rgba(108, 117, 125, 0.12);
  --status-booked: #8a6b32;
  --status-booked-soft: rgba(217, 179, 110, 0.18);
  --status-dispatched: #7c3aed;
  --status-dispatched-soft: rgba(124, 58, 237, 0.14);
  --status-in-transit: #0f6fb5;
  --status-in-transit-soft: rgba(125, 211, 252, 0.22);
  --status-delivered: #15803d;
  --status-delivered-soft: rgba(34, 197, 94, 0.14);
  --status-pod-received: #0f8b8d;
  --status-pod-received-soft: rgba(45, 212, 191, 0.16);
  --status-ready-to-invoice: #b58900;
  --status-ready-to-invoice-soft: rgba(255, 193, 7, 0.2);
  --status-invoiced: #1e3a8a;
  --status-invoiced-soft: rgba(37, 99, 235, 0.12);
  --status-cancelled: #dc3545;
  --status-cancelled-soft: rgba(220, 53, 69, 0.12);

  --success-hover: #276b45;

  /* --- Load chips (stop kind, arrival, outcome; ui.css) --- */
  --chip-pickup-ink: #2563eb;      --chip-pickup-soft: rgba(59, 130, 246, 0.13);  --chip-pickup-border: rgba(59, 130, 246, 0.2);
  --chip-delivery-ink: #0f766e;    --chip-delivery-soft: rgba(20, 184, 166, 0.14); --chip-delivery-border: rgba(20, 184, 166, 0.2);
  --chip-arrived-ink: #b58900;     --chip-arrived-soft: rgba(255, 193, 7, 0.2);    --chip-arrived-border: rgba(255, 193, 7, 0.26);
  --chip-tonu-ink: #9a3412;        --chip-tonu-soft: rgba(251, 146, 60, 0.14);     --chip-tonu-border: rgba(251, 146, 60, 0.22);
  --chip-related-ink: #1d4ed8;     --chip-related-soft: rgba(37, 99, 235, 0.1);
  --chip-neutral-soft: rgba(226, 232, 240, 0.8); --chip-neutral-border: rgba(203, 213, 225, 0.95);

  /* --- Status chip borders (badges in ui.css) --- */
  --status-draft-border: rgba(108, 117, 125, 0.16);
  --status-booked-border: rgba(217, 179, 110, 0.24);
  --status-dispatched-border: rgba(124, 58, 237, 0.22);
  --status-in-transit-border: rgba(56, 189, 248, 0.26);
  --status-delivered-border: rgba(34, 197, 94, 0.2);
  --status-pod-received-border: rgba(45, 212, 191, 0.24);
  --status-ready-to-invoice-border: rgba(255, 193, 7, 0.26);
  --status-invoiced-border: rgba(37, 99, 235, 0.18);
  --status-cancelled-border: rgba(220, 53, 69, 0.16);

  /* --- Shadow ink: RGB triplet used as rgba(var(--shadow-ink), alpha) in box-shadows --- */
  --shadow-ink: 15, 23, 42;

  /* --- Billing states (load list, load detail, billing report) --- */
  --billing-issue-ink: #b45309;
  --billing-issue-soft: #fff3dc;
  --billing-issue-border: #efd49e;
  --billing-overdue-ink: #9a3f00;
  --billing-overdue-soft: #fff0dc;
  --billing-overdue-border: #efc48d;
  --billing-payment-ink: #435ab5;
  --billing-payment-soft: #eef3ff;
  --billing-payment-border: #cbd7ff;
  --billing-finished-ink: #356447;
  --billing-finished-soft: #eef8f2;
  --billing-finished-border: #cfe6d7;
  --billing-closed-ink: #475467;
  --billing-closed-soft: #eef2f6;
  --billing-closed-border: #d8dee8;
  --billing-ready-ink: #8a6a16;
  --billing-ready-soft: #fff6df;
  --billing-ready-border: #f0dfae;
  --billing-normal-ink: #667085;
  --billing-normal-soft: #eef2f7;
  --billing-normal-border: #dde5ef;

  /* --- Billing row tints (load list + billing report rows) --- */
  --row-issue-bg: #fffaf3;
  --row-issue-bg-hover: #fff4e6;
  --row-issue-rail: #d97706;
  --row-overdue-bg: #fff8f0;
  --row-overdue-bg-hover: #fff0dc;
  --row-overdue-rail: #b45309;
  --row-payment-bg: #f7fbff;
  --row-payment-bg-hover: #eef5ff;
  --row-payment-rail: #9db8dd;
  --row-finished-bg: #f8fcfa;
  --row-finished-bg-hover: #eef8f2;
  --row-finished-rail: #7cb99a;
  --row-closed-bg: #fbfcfd;
  --row-closed-bg-hover: #f3f6f9;
  --row-closed-rail: #c3d1e2;
  --row-muted-ink: #7a8699;

  /* --- Form controls (staff forms; the load-form scale) --- */
  --control-height: 2.22rem;
  --control-padding: 0.3rem 0.62rem;
  --control-font: 0.84rem;
  --control-line-height: 1.2;
  --control-radius: 10px;
  --label-font: 0.74rem;
  --label-weight: 650;
  --label-spacing: 0.01em;

  /* --- Form action buttons (Save / Cancel / Back on form pages) --- */
  --btn-height: 2.5rem;
  --btn-padding: 0.45rem 0.95rem;
  --btn-font: 0.875rem;
  --btn-radius: 12px;

  /* Compact secondary actions, matching Quick Dispatch. */
  --btn-compact-padding: 0.375rem 0.94rem;
  --btn-compact-radius: 9px;
  --btn-danger-ink: light-dark(#b91c1c, var(--danger));
  --btn-danger-bg: light-dark(#fff5f5, var(--danger-soft));
  --btn-danger-border: light-dark(rgba(185, 28, 28, 0.14), var(--danger-border));
  --btn-danger-hover-bg: light-dark(#feecec, var(--danger-soft));
  --btn-danger-hover-border: light-dark(rgba(185, 28, 28, 0.22), var(--danger-border));
  --btn-danger-hover-shadow: 0 8px 18px light-dark(rgba(185, 28, 28, 0.08), var(--danger-soft));
  --btn-compact-focus-ring: 0 0 0 3px light-dark(rgba(75, 119, 206, 0.12), var(--accent-soft));

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 14px 34px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 46px rgba(15, 23, 42, 0.09);

  /* --- Type scale --- */
  --text-xs: 0.72rem;
  --text-sm: 0.78rem;
  --text-md: 0.84rem;
  --text-body: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}

/* ============================================================
   Dark theme. Activated by data-theme="dark" on <html> (set by the
   head script in base.html from the user's Appearance preference).
   Only colour tokens change; sizing tokens are shared.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* A softer foreground on lifted, less saturated surfaces keeps dense
     screens readable without the sharp white-on-near-black contrast. */
  --ink: #d7dde6;
  --ink-soft: #bbc5d2;
  --ink-muted: #9aa7b8;
  --ink-faint: #9aa7b8;
  --ink-inverse: #0b1220; /* text on accent / semantic fills, which are light in dark */

  --surface: #1b2330;
  --surface-soft: #202b3a;
  --surface-muted: #253143;
  --surface-inset: #2b3749;
  --page-bg: #151c26;

  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.28);
  --border-faint: rgba(148, 163, 184, 0.10);

  --accent: #85acd9;
  --accent-hover: #9abbe2;
  --accent-bright: #a9c7e8;
  --accent-soft: rgba(133, 172, 217, 0.12);
  --accent-border: rgba(133, 172, 217, 0.32);

  --success: #63c58e;
  --success-soft: rgba(99, 197, 142, 0.14);
  --success-border: rgba(99, 197, 142, 0.32);
  --warning: #e5a75b;
  --warning-soft: rgba(229, 167, 91, 0.14);
  --warning-border: rgba(229, 167, 91, 0.34);
  --danger: #f08b80;
  --danger-hover: #f6a39a;
  --danger-soft: rgba(240, 139, 128, 0.14);
  --danger-border: rgba(240, 139, 128, 0.34);

  /* Opaque, subtle chip fills keep label contrast stable on tinted and
     selected table rows as well as on the normal card surface. */
  --status-draft: #9aa4b2;            --status-draft-soft: #2a3240;
  --status-booked: #d9b36e;           --status-booked-soft: #323437;
  --status-dispatched: #b59cf5;       --status-dispatched-soft: #2d3248;
  --status-in-transit: #6fbcf0;       --status-in-transit-soft: #253547;
  --status-delivered: #6fd39a;        --status-delivered-soft: #25383d;
  --status-pod-received: #63d6d0;     --status-pod-received-soft: #243843;
  --status-ready-to-invoice: #f2c94c; --status-ready-to-invoice-soft: #353733;
  --status-invoiced: #8fb0ff;         --status-invoiced-soft: #293449;
  --status-cancelled: #f28b82;        --status-cancelled-soft: #352f3a;

  --success-hover: #7fd3a3;
  --chip-pickup-ink: #8db4ff;      --chip-pickup-soft: rgba(141, 180, 255, 0.16);  --chip-pickup-border: rgba(141, 180, 255, 0.34);
  --chip-delivery-ink: #63d6c8;    --chip-delivery-soft: rgba(99, 214, 200, 0.16);  --chip-delivery-border: rgba(99, 214, 200, 0.34);
  --chip-arrived-ink: #f2c94c;     --chip-arrived-soft: rgba(242, 201, 76, 0.16);   --chip-arrived-border: rgba(242, 201, 76, 0.34);
  --chip-tonu-ink: #f4a56b;        --chip-tonu-soft: rgba(244, 165, 107, 0.16);     --chip-tonu-border: rgba(244, 165, 107, 0.34);
  --chip-related-ink: #9db4f5;     --chip-related-soft: rgba(157, 180, 245, 0.16);
  --chip-neutral-soft: rgba(148, 163, 184, 0.14); --chip-neutral-border: rgba(148, 163, 184, 0.3);
  --status-draft-border: rgba(154, 164, 178, 0.32);
  --status-booked-border: rgba(217, 179, 110, 0.36);
  --status-dispatched-border: rgba(181, 156, 245, 0.36);
  --status-in-transit-border: rgba(111, 188, 240, 0.36);
  --status-delivered-border: rgba(111, 211, 154, 0.36);
  --status-pod-received-border: rgba(99, 214, 208, 0.36);
  --status-ready-to-invoice-border: rgba(242, 201, 76, 0.36);
  --status-invoiced-border: rgba(143, 176, 255, 0.36);
  --status-cancelled-border: rgba(242, 139, 130, 0.36);
  --shadow-ink: 0, 0, 0;

  --billing-issue-ink: #e5a75b;    --billing-issue-soft: rgba(229, 167, 91, 0.14);    --billing-issue-border: rgba(229, 167, 91, 0.32);
  --billing-overdue-ink: #f0a070;  --billing-overdue-soft: rgba(240, 160, 112, 0.14); --billing-overdue-border: rgba(240, 160, 112, 0.34);
  --billing-payment-ink: #9db4f5;  --billing-payment-soft: rgba(157, 180, 245, 0.14); --billing-payment-border: rgba(157, 180, 245, 0.30);
  --billing-finished-ink: #7fcfa0; --billing-finished-soft: rgba(127, 207, 160, 0.14); --billing-finished-border: rgba(127, 207, 160, 0.30);
  --billing-closed-ink: #9aa4b2;   --billing-closed-soft: rgba(154, 164, 178, 0.12);  --billing-closed-border: rgba(154, 164, 178, 0.24);
  --billing-ready-ink: #e3c265;    --billing-ready-soft: rgba(227, 194, 101, 0.14);   --billing-ready-border: rgba(227, 194, 101, 0.30);
  --billing-normal-ink: #94a3b8;   --billing-normal-soft: rgba(148, 163, 184, 0.12);  --billing-normal-border: rgba(148, 163, 184, 0.22);

  --row-issue-bg: rgba(229, 167, 91, 0.07);    --row-issue-bg-hover: rgba(229, 167, 91, 0.12);    --row-issue-rail: #e5a75b;
  --row-overdue-bg: rgba(240, 160, 112, 0.07); --row-overdue-bg-hover: rgba(240, 160, 112, 0.12); --row-overdue-rail: #f0a070;
  --row-payment-bg: rgba(157, 180, 245, 0.06); --row-payment-bg-hover: rgba(157, 180, 245, 0.11); --row-payment-rail: #7f9bd6;
  --row-finished-bg: rgba(127, 207, 160, 0.06); --row-finished-bg-hover: rgba(127, 207, 160, 0.11); --row-finished-rail: #6fb98e;
  --row-closed-bg: rgba(148, 163, 184, 0.05);  --row-closed-bg-hover: rgba(148, 163, 184, 0.09);  --row-closed-rail: #55627b;
  --row-muted-ink: #9aa7b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 20px 46px rgba(0, 0, 0, 0.32);

  /* --- Bootstrap 5.3 dark-mode bridge ---
     Bootstrap paints its own components (table rows, dropdowns, modals, form
     controls, alerts) from its neutral dark greys (#212529 and friends), which
     should follow the same slate surfaces and soft text as the rest of the UI.
     Bootstrap needs the -rgb triplets as literals; keep them in step with the
     values above. */
  --bs-body-bg: #1b2330;              --bs-body-bg-rgb: 27, 35, 48;
  --bs-body-color: #d7dde6;           --bs-body-color-rgb: 215, 221, 230;
  --bs-emphasis-color: var(--ink);   --bs-emphasis-color-rgb: 215, 221, 230;
  --bs-secondary-color: #bbc5d2;      --bs-secondary-color-rgb: 187, 197, 210;
  --bs-secondary-bg: #253143;         --bs-secondary-bg-rgb: 37, 49, 67;
  --bs-tertiary-color: #9aa7b8;       --bs-tertiary-color-rgb: 154, 167, 184;
  --bs-tertiary-bg: #202b3a;          --bs-tertiary-bg-rgb: 32, 43, 58;
  --bs-heading-color: inherit;
  --bs-link-color: #85acd9;           --bs-link-color-rgb: 133, 172, 217;
  --bs-link-hover-color: #9abbe2;     --bs-link-hover-color-rgb: 154, 187, 226;
  --bs-code-color: #f08b80;
  --bs-border-color: rgba(148, 163, 184, 0.16);
  --bs-border-color-translucent: rgba(148, 163, 184, 0.16);
  --bs-primary-text-emphasis: #a9c7e8;   --bs-primary-bg-subtle: rgba(133, 172, 217, 0.12);   --bs-primary-border-subtle: rgba(133, 172, 217, 0.32);
  --bs-secondary-text-emphasis: #bbc5d2; --bs-secondary-bg-subtle: #253143;                    --bs-secondary-border-subtle: rgba(148, 163, 184, 0.28);
  --bs-success-text-emphasis: #63c58e;   --bs-success-bg-subtle: rgba(99, 197, 142, 0.14);     --bs-success-border-subtle: rgba(99, 197, 142, 0.32);
  --bs-info-text-emphasis: #6fbcf0;      --bs-info-bg-subtle: rgba(111, 188, 240, 0.18);       --bs-info-border-subtle: rgba(111, 188, 240, 0.34);
  --bs-warning-text-emphasis: #e5a75b;   --bs-warning-bg-subtle: rgba(229, 167, 91, 0.14);     --bs-warning-border-subtle: rgba(229, 167, 91, 0.34);
  --bs-danger-text-emphasis: #f08b80;    --bs-danger-bg-subtle: rgba(240, 139, 128, 0.14);     --bs-danger-border-subtle: rgba(240, 139, 128, 0.34);
  --bs-light-text-emphasis: #bbc5d2;     --bs-light-bg-subtle: #2b3749;                        --bs-light-border-subtle: rgba(148, 163, 184, 0.28);
  --bs-dark-text-emphasis: #d7dde6;      --bs-dark-bg-subtle: #151c26;                         --bs-dark-border-subtle: rgba(148, 163, 184, 0.16);
  --bs-form-valid-color: #63c58e;        --bs-form-valid-border-color: #63c58e;
  --bs-form-invalid-color: #f08b80;      --bs-form-invalid-border-color: #f08b80;
}