/*
 * Click ERP — design foundations
 * ==============================
 * The single place for the admin panel's design tokens. Values are exactly those of the
 * approved prototype (Click ERP-Final V-modern); the prototype styles that follow
 * (clickerp*.css) read them with var(--token).
 *
 * Load order (layouts/inc/__css.blade.php): Google Fonts → foundations.css → clickerp.css →
 * clickerp-shell.css → clickerp-admin.css → clickerp-wave3.css → clickerp-modern.css.
 *
 * Note: the modern layer (clickerp-modern.css) also writes some of these colours as literal
 * values (e.g. #16233f). If a brand colour changes, search that file for the old value too.
 *
 * Typography (not tokens — reference)
 *   Arabic  : 'Cairo' 400 / 500 / 600 / 700 / 800      (body[dir="rtl"], the default)
 *   English : 'IBM Plex Sans' 400 / 500 / 600 / 700    (body[dir="ltr"])
 *   Body text 15px / line-height 1.6. Sizes used most: 11 · 11.5 · 12 · 12.5 · 13 · 13.5 · 14 · 14.5 · 15
 *   Headings and figures: 16 · 19 · 20 · 22 · 24 · 26. Weights: 600 and 700 for titles, 500 for labels.
 *
 * Spacing steps used by the layout (px, reference): 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16
 * Radius used (px, reference): 6 · 8 · 10 · 12 · 14, and 999 for pills.
 *
 * Component-scoped tokens stay next to their component:
 *   .side { --sb-* }                     side-menu colours          (clickerp.css)
 *   #app.collapsed { --sw }              collapsed side-menu width  (clickerp.css)
 *   body[data-density="compact"] {...}   compact tables             (clickerp-wave3.css)
 */

:root {

    /* Brand colours — Navy is the primary colour (headers, primary buttons, links); green is the accent (success, highlights). */
    --navy: #16233f;
    --navy-2: #22345a;
    --navy-soft: #eef1f7;
    --green: #7ab648;
    --green-d: #4a7626;
    --green-strong: #3f6f1f;
    --green-soft: #eef6e6;
    --blue: #2a62b8;
    --blue-soft: #e8f0fc;

    /* Surfaces — Page background and card / panel surface. */
    --bg: #f5f7fa;
    --surface: #fff;

    /* Text — ink = headings and strong text; body = running text; muted = secondary text and labels. */
    --ink: #0d1626;
    --body: #2b384e;
    --muted: #5f6c80;
    --muted-2: #5f6b78;
    --green-text: #4a7626;
    --red-text: #c6352c;
    --amber-text: #95641f;

    /* Status colours — red = error / overdue / danger; amber = warning / pending. -soft = tinted background of the same status. */
    --red: #c6352c;
    --red-soft: #fdeceb;
    --amber: #9a6417;
    --amber-soft: #fdf3e3;

    /* Lines — Borders and dividers. */
    --line: #dfe4ee;
    --line-2: #eaeef5;

    /* Shape — Corner radius (r = cards and panels, r-s = controls and small boxes), card shadow, focus ring. */
    --r: 12px;
    --r-s: 8px;
    --shadow: 0 1px 2px rgba(16,26,46,.05),0 8px 24px -16px rgba(16,26,46,.24);
    --ring: 0 0 0 3px rgba(22,35,63,.09);

    /* Layout — Side menu width (the collapsed width is set on #app.collapsed in clickerp.css). */
    --sw: 264px;

    /* Form controls — Height and border colour of inputs, selects and buttons. */
    --ctl-h: 42px;
    --ctl-bd: #d3dae7;

    /* Cards — Statistic cards and section cards. */
    --ds-border: #dfe4ee;
    --ds-border-hover: #c9d3e2;
    --ds-radius: 12px;
    --ds-pad: 16px;
    --ds-gap: 12px;
    --ds-accent: #7ab648;

    /* Tables — Cell padding, header and row colours. 'pro' = the main list tables; '-d' = compact density values (body[data-density="compact"] in clickerp-wave3.css). */
    --tbl-pro-py: 12px;
    --tbl-pro-px: 14px;
    --tbl-pro-edge: 20px;
    --tbl-pro-line: #eef2f8;
    --tbl-pro-head: #e7edf7;
    --tbl-pro-head-ink: var(--navy,#16233f);
    --tbl-pro-head-on: #d9e3f2;
    --tbl-py: 13px;
    --tbl-px: 16px;
    --tbl-py-d: 11px;
    --tbl-px-d: 12px;
    --tbl-head-bg: #eef2f8;
    --tbl-head-ink: #1b2740;
    --tbl-head-line: #c7d2e4;
    --tbl-hover: #f2f6fc;
    --tbl-sel: #eef4ff;
    --tbl-chk: 42px;

    /* Status badges — Badge text colours and the three badge sizes (s = small, m = medium, l = large): font size, padding, line height. */
    --bdg-b-ink: #2a62b8;
    --bdg-gr-ink: #5d6878;
    --bdg-s-fs: 10.5px;
    --bdg-s-pad: 2px 7px;
    --bdg-s-lh: 16px;
    --bdg-m-fs: 12px;
    --bdg-m-pad: 3px 10px;
    --bdg-m-lh: 18px;
    --bdg-l-fs: 14px;
    --bdg-l-pad: 7px 15px;
    --bdg-l-lh: 22px;
}