/*--------------------------------------------------------------
# Design tokens: the site's colours, radii and shadows as CSS variables.
#
# Loaded by the layouts after Bootstrap and before site.css, so every stylesheet can use them.
# New styles take their colours and sizes from here instead of repeating hex values; the older
# rules in site.css are moved onto them as each area is modernized (docs/archive/UI_MODERNIZATION_PLAN.md).
# The reference colours they come from are listed at the top of site.css.
--------------------------------------------------------------*/
:root {
    /* Brand */
    --alma-blue: #304f7f;         /* AL-MA blue: buttons, headings, table header rule */
    --alma-blue-hover: #3e6db5;   /* the AL-MA blue hovered (Cargo Tracking's .btn-track; the buttons use --btn-primary-bg-h) */
    --alma-ink: #172b45;          /* Midnight ink: the dashboard's MARKETS band, tooltips, modal titles */
    --alma-accent: #106eea;       /* links, the modals' accent */
    --alma-logo-top: #3569ab;     /* the header logo's gradient, top to bottom (alma-svg-logo.svg) */
    --alma-logo-bottom: #061a4f;
    --alma-progress: #4da3ff;     /* the page-load bar's bright tip: reads on the blue topbar and on white */
    --alma-steel: #8b9eb0;        /* .btn-alma-secondary */
    --alma-muted: #6b7686;        /* secondary text in modern components */

    /* Buttons: one set of colours per role (docs/archive/v2_STYLES_HOMOGENIZATION.md Q8). components.css §3 maps each role
       class onto Bootstrap's --bs-btn-* variables, so a theme (v3-night.css) changes buttons by setting these
       tokens only, never by writing button selectors. Keep them literal values: the modals redefine
       --alma-blue inside themselves at night, and a button must not follow that.
         -bg / -fg / -bd        the button at rest (-bd falls back to the theme's --btn-rim, then to -bg)
         -bg-h / -fg-h / -bd-h  hovered (-fg-h falls back to -fg, -bd-h to the rim, then to -bg-h)
         -bg-a / -bd-a          pressed
       The secondary roles are style B ("soft tint", chosen 2026-10-12): a tint of their colour with the colour as text. */
    --btn-primary-bg: #304f7f;  --btn-primary-fg: #fff;  --btn-primary-bg-h: #3e6db5;  --btn-primary-bg-a: #29446d;  /* = the AL-MA blue */
    /* Filters and the column picker: white with a light grey rim and dark text */
    --btn-filter-bg: #fff;      --btn-filter-fg: #172b45; --btn-filter-bd: #d3dae3;    --btn-filter-bg-h: #f3f5f8;  --btn-filter-bd-h: #d3dae3; --btn-filter-bg-a: #e6eaf0; --btn-filter-bd-a: #d3dae3;
    /* The menu tier (Menu, switches, utilities, Reset, counts): a soft blue tint */
    --btn-neutral-bg: #e8eef7;  --btn-neutral-fg: #304f7f; --btn-neutral-bd: #e8eef7;  --btn-neutral-bg-h: #d6e1f0; --btn-neutral-fg-h: #172b45; --btn-neutral-bd-h: #d6e1f0; --btn-neutral-bg-a: #c5d4ea; --btn-neutral-bd-a: #c5d4ea;
    /* Cancel and Back to List: a soft grey, one step darker than the first style B grey (#eceef1), with black text, so
       it stands off the light page (the user, 2026-10-12) */
    --btn-cancel-bg: #dde1e6;   --btn-cancel-fg: #000;    --btn-cancel-bd: #dde1e6;   --btn-cancel-bg-h: #cfd4db;  --btn-cancel-fg-h: #000;    --btn-cancel-bd-h: #cfd4db; --btn-cancel-bg-a: #c1c7cf; --btn-cancel-bd-a: #c1c7cf;
    /* Admin-only actions (btn-admin): a muted pastel purple, so they read as "not for everyone" (the user, 2026-10-12) */
    --btn-admin-bg: #ece6f6;    --btn-admin-fg: #4a3478;  --btn-admin-bd: #ece6f6;    --btn-admin-bg-h: #ddd2ef;   --btn-admin-fg-h: #3a2862; --btn-admin-bd-h: #ddd2ef;  --btn-admin-bg-a: #cfc0e7;  --btn-admin-bd-a: #cfc0e7;
    /* Delete, removers, reversals: solid red. The single PDF: a soft red */
    --btn-danger-bg: #dc3545;   --btn-danger-fg: #fff;   --btn-danger-bg-h: #bb2d3b;   --btn-danger-bg-a: #b02a37;
    --btn-danger-soft-bg: #fdecec; --btn-danger-soft-fg: #b42318; --btn-danger-soft-bd: #fdecec; --btn-danger-soft-bg-h: #f9d7d5; --btn-danger-soft-fg-h: #912018; --btn-danger-soft-bd-h: #f9d7d5; --btn-danger-soft-bg-a: #f4c3c0; --btn-danger-soft-bd-a: #f4c3c0;
    /* Open Job, Approve: solid green. Create Job, Excel: a soft green */
    --btn-success-bg: #198754;  --btn-success-fg: #fff;  --btn-success-bg-h: #157347;  --btn-success-bg-a: #146c43;
    --btn-success-soft-bg: #e7f4ec; --btn-success-soft-fg: #146c43; --btn-success-soft-bd: #e7f4ec; --btn-success-soft-bg-h: #d2ebdc; --btn-success-soft-fg-h: #0f5132; --btn-success-soft-bd-h: #d2ebdc; --btn-success-soft-bg-a: #bfe2cd; --btn-success-soft-bd-a: #bfe2cd;
    --btn-warning-bg: #ffc107;  --btn-warning-fg: #000;  --btn-warning-bg-h: #ffca2c;  --btn-warning-bg-a: #ffcd39;
    /* btn-light (Bootstrap's light grey with site.css's grey rim): only until B-12 moves the count buttons to the menu tier */
    --btn-light-bg: #f8f9fa;    --btn-light-fg: #000;    --btn-light-bd: #ced4da;      --btn-light-bg-h: #ced4da;  --btn-light-bd-h: #ced4da;  --btn-light-bg-a: #c6c7c8; --btn-light-bd-a: #c6c7c8;

    /* The modals' green pill (.mm-btn.is-success, modal.css); the other pills are v3.css's (§6) */
    --pill-success-bg: #198754; --pill-success-fg: #fff; --pill-success-bg-h: #157347;

    /* The night page-load bar (v3-night.css): the bright blue Add New wore before it became
       btn-alma (B-21) */
    --progress-accent: #3f7fe0;
    --grid-search-border: #d3dae3;  /* the grid's search box: the Filters button's light grey rim */
    --grid-search-focus: var(--alma-blue);  /* its ring when focused, not the fields' light Bootstrap blue */

    /* Surfaces and lines */
    --alma-surface: #f5f7fb;      /* a tinted panel (the quick view's facts) */
    --alma-line: rgba(48, 79, 127, 0.12);
    --alma-table-head: #e9ecef;   /* .thead_custom */

    /* Radii: controls follow Bootstrap's own (6px); panels are rounder */
    --alma-radius: var(--bs-border-radius);
    --alma-radius-panel: 12px;

    /* The brushed-steel head of the dashboard's panels, the bell's panel and the settings menus: one gradient for all of them */
    --alma-panel-head: linear-gradient(135deg, #304f7f 0%, #12376b 50%,#304f7f 100%);
    --alma-panel-head-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18);

    /* Shadows */
    --alma-shadow-card: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;

    /* One height for every control in a grid toolbar (a .btn-sm is 31px) */
    --grid-control-h: 31px;

    /* Form fields (components.css): one size for every floating field, native or select2.
       52px holds a 12px label over a 15px value with room around it (48px was tried first and
       felt tight); change --field-h to make every form denser or roomier at once. */
    --field-h: 52px;                  /* cannot go below 46px - will create clipping. */
    --field-px: .75rem;               /* the label's and the value's left inset: they line up */
    --field-value-top: 1.25rem;       /* the value starts under the label */
    --field-value-bottom: .25rem;
    --field-font: .9375rem;           /* 15px value */
    --field-label-font: .75rem;       /* 12px label */
    --field-label-top: .35rem;
    --field-label-color: #5f6b7a;
    --field-border: #ced4da;          /* Bootstrap's input border */
    --field-focus: #86b7fe;           /* Bootstrap's focused input border */
    --field-readonly-bg: #e9ecef;     /* a field that can't be edited here (Bootstrap's disabled grey) */
    --field-chosen-bg: #edf7f1;       /* a chosen item: an order ticked or added to an export */
    --field-chosen-border: #8fcaa4;
    --field-chosen-check: #198754;    /* its tick (Bootstrap's success green) */
    --field-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Small buttons share the inputs' radius (Bootstrap gives them 4px against the inputs' 6px, and
   views used to patch it back to 5px one button at a time with style="border-radius:5px"). */
.btn-sm {
    --bs-btn-border-radius: var(--bs-border-radius);
}

/*--------------------------------------------------------------
# Glass and ink: the new homepage's surfaces and text colours, one set per scene, shared by the new homepage (landing.css,
# whose --lp-* tokens point here) and the v3 look (v3.css), so the two can't drift (docs/archive/v3_THEME_PLAN.md, D7). Day is on :root;
# sunset and night follow html[data-v3-scene] (v3-scene.js), and a page without a scene (the classic look) is day.
#   --glass-*        the large glass: the contact card, the portal preview, v3's page cards
#   --glass-card-*   the small glass cards (the contact cards), with their hover
#   --glass-modal-*  the sign-in window; its fields
#   --glass-field-*  a field on the glass
#   --ink-*          headings, body copy, secondary text, the faintest text, the accent (the headings' second row, rules, links)
--------------------------------------------------------------*/
:root {
    --glass-bg: linear-gradient(135deg, #ffffff91, #e6f1fc62);
    --glass-rim: #ffffffa6;
    --glass-shadow: 0 18px 55px #172b451c, inset 0 1px 0 #ffffffcc;
    --glass-filter: blur(22px) saturate(125%);
    --glass-card: linear-gradient(135deg, #ffffff70, #e6f1fc35);
    --glass-card-rim: #ffffff9c;
    --glass-card-shadow: inset 0 1px 0 #ffffff99, 0 6px 22px #172b450a;
    --glass-card-hover: #ffffffa0;
    --glass-card-rim-hover: #fff;
    --glass-modal: linear-gradient(135deg, #ffffffc4, #edf6ff7a);
    --glass-modal-rim: #ffffffb8;
    --glass-modal-shadow: 0 20px 65px #172b4533, inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #ffffff40;
    --glass-modal-filter: blur(22px) saturate(135%);
    --glass-modal-field: #fff;
    --glass-modal-field-rim: #304f7f40;
    --glass-field: #ffffff91;
    --glass-field-rim: #ffffffb8;
    --glass-field-ink: #172b45;
    --ink: #172b45;
    --ink-body: #233e5c;
    --ink-muted: #496585;
    --ink-soft: #5b7391;
    --ink-accent: #304f7f;
    /* The loading placeholders (skeletons: grids, cards, the dashboard's panels): the scene's ink, thinned out.
       Declared here with the ink they are made of, so each scene's own --ink gives them their colour. */
    --skel-base: color-mix(in srgb, var(--ink) 7%, transparent);
    --skel-hi: color-mix(in srgb, var(--ink) 15%, transparent);
}

/* Sunset: the glass warmed, plum text with a rose accent. The filters and the fields' grounds are day's. */
html[data-v3-scene="sunset"] {
    --glass-bg: linear-gradient(135deg, #fffaf491, #fde7d062);
    --glass-rim: #fff4e8a6;
    --glass-shadow: 0 18px 55px #42284a1f, inset 0 1px 0 #ffffffcc;
    --glass-card: linear-gradient(135deg, #fffaf470, #fde7d035);
    --glass-card-rim: #fff4e89c;
    --glass-card-shadow: inset 0 1px 0 #ffffff99, 0 6px 22px #42284a0d;
    --glass-card-hover: #fffaf4a0;
    --glass-modal: linear-gradient(135deg, #fffaf4c4, #fde7d07a);
    --glass-modal-rim: #fff4e8b8;
    --glass-modal-shadow: 0 20px 65px #42284a33, inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #ffffff40;
    --glass-modal-field-rim: #7b3f6340;
    --glass-field-ink: #3a2740;
    --ink: #3a2740;
    --ink-body: #4b3651;
    --ink-muted: #6b5470;
    --ink-soft: #7a6380;
    --ink-accent: #7b3f63;
}

/* Night: the dashboard's slate glass (v3-night.css); what shows through is dimmed and greyed. Light text, the night's light blue. */
html[data-v3-scene="night"] {
    --glass-bg: linear-gradient(180deg, #282f3abd, #1e242ead);
    --glass-rim: #a0acbe33;
    --glass-shadow: 0 6px 20px #00000066, inset 0 1px 0 #ffffff0f;
    --glass-filter: blur(18px) brightness(.55) saturate(.7);
    --glass-card: linear-gradient(180deg, #282f3a99, #1e242e85);
    --glass-card-rim: #a0acbe33;
    --glass-card-shadow: inset 0 1px 0 #ffffff0d, 0 6px 22px #00000040;
    --glass-card-hover: #343d4bcc;
    --glass-card-rim-hover: #a0acbe73;
    --glass-modal: linear-gradient(180deg, #282f3ae6, #1e242ee0);
    --glass-modal-rim: #a0acbe33;
    --glass-modal-shadow: 0 20px 65px #00000080, inset 0 1px 0 #ffffff0f;
    --glass-modal-filter: blur(18px) brightness(.55) saturate(.7);
    --glass-modal-field: #0f1622b3;
    --glass-modal-field-rim: #a0acbe40;
    --glass-field: #0f162273;
    --glass-field-rim: #a0acbe40;
    --glass-field-ink: #e6eef9;
    --ink: #e6eef9;
    --ink-body: #bccbde;
    --ink-muted: #93a6bf;
    --ink-soft: #8396b0;
    --ink-accent: #8cb4f0;
}