/*--------------------------------------------------------------
# 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 (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;   /* .btn-alma on hover */
    --alma-ink: #172b45;          /* Midnight ink: the dashboard's MARKETS band, tooltips, modern modal titles */
    --alma-accent: #106eea;       /* links, the modern modals' accent */
    --alma-steel: #8b9eb0;        /* .btn-alma-secondary */
    --alma-muted: #6b7686;        /* secondary text in modern components */

    /* 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 and modals are rounder */
    --alma-radius: var(--bs-border-radius);
    --alma-radius-panel: 12px;
    --alma-radius-modal: 18px;

    /* Shadows */
    --alma-shadow-card: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
    --alma-shadow-raised: 0 30px 70px -12px rgba(12, 7, 74, 0.35), 0 0 0 1px rgba(48, 79, 127, 0.08);

    /* 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: #f8f9fa;     /* a field that can't be edited here */
    --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);
}