/* tokens.css
   Design primitives only (no component rules)
-------------------------------------------------------------- */
:root {
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Market Sans", Arial, sans-serif;

    --text-xs: 10.5px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-title-sm: 18px;
    --text-xl: 20px;
    --text-2xl: 28px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-tight: 1.1;
    --line-normal: 1.35;
    --line-relaxed: 1.6;

    /* Layout */
    --wrapper-max: 1200px;
    --wrapper-gutter: 48px; /* used in: calc(100% - 48px) */

    /* Controls (form field widths) */
    --control-width-sm: 200px; /* specs input width */
    --control-width-md: 320px; /* columnForm standard field width */

    /* Spacing scale */
    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-9: 18px;
    --space-10: 20px;
    --space-12: 24px;
    --space-14: 28px;
    --space-16: 32px;

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

    /* Borders */
    --border-1: 1px;

    /* Core colors */
    --color-bg: #f4f6f9;            /* BODY background */
    --color-surface: #ffffff;       /* cards, nav, tables */
    --color-surface-muted: #fafafa; /* controls-bar background */
    --color-surface-tint: #f7f7f7;  /* inventory badge bg */
    --color-text: #333333;
    --color-text-secondary: #555555;   /* mid-strength body text */
    --color-text-muted: #666666;
    --color-text-subtle: #777777;
    --color-text-faint: #888888;
    --color-text-inverse: #ffffff;

    /* Links */
    --color-link: #1a6fa8;
    --color-link-hover: #255a96;

    /* Brand / primary (matches .btn.primary / .data-table header) */
    --color-primary: #4a7ba7;
    --color-primary-hover: #3e6d96;

    /* Accents used in nav/header */
    --color-primary-ink: #1f3a8a;   /* active text */
    --color-primary-soft: #e6efff;  /* active bg / sub-nav bg */
    --color-primary-border: #b6ccff;

    /* Borders / dividers (normalize your current grays/blues) */
    --color-border: #e0e0e0;
    --color-border-soft: #e2e6ee;   /* .page border */
    --color-border-nav: #dde3eb;
    --color-border-nav-soft: #d7e3f7;
    --color-border-subtle: #d0d0d0;
    --color-border-strong: #cccccc;
    --color-divider: #d0d7e0;
    --color-divider-light: #eeeeee;
    --color-surface-2: #f6f8fa;
    --color-hr: lightgray;

    /* Legacy table variant (dataList) */
    --color-datalist-border: #a0aabe;
    --color-datalist-cell-bg: #f5f5f5;
    --color-datalist-summary-bg: #336699; /* legacy #369 */

    /* Sectioned list (list-card) */
    --color-list-border: #dde1e6;
    --color-list-header-bg: #f0f2f5;
    --color-list-header-text: #666666;
    --color-list-row-divider: #eef0f3;
    --color-list-row-hover: #f5f8ff;

    /* Table row hover / muted surfaces */
    --color-row-hover: #f8f9fa;
    --color-surface-hover: #f2f5f9;

    /* Status colors */
    --color-success-bg: #d8ebc3;
    --color-warning-bg: #fff1a8;
    --color-error-bg: #f9b8b8;

    /* Toast colors */
    --color-toast-success: #28a745;
    --color-toast-error: #dc3545;

    /* Danger (confirm delete) */
    --color-danger: #d32f2f;
    --color-danger-hover: #c62828;

    /* Forms */
    --color-form-error: #cc0033; /* legacy .error */

    /* Nav borders */
    --color-border-nav-active: #c7d7ee;

    /* Top strip */
    --color-topstrip-bg: #6f7f87;

    /* Minor text */
    --color-text-separator: #999999;
    --color-icon-muted: #999999; /* e.g., modal close */

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* Tooltip */
    --color-tooltip-bg: #333333;

    /* Toast */
    --toast-offset: var(--space-10);       /* 20px */
    --toast-padding-y: var(--space-6);     /* 12px */
    --toast-padding-x: var(--space-10);    /* 20px */
    --toast-radius: var(--radius-sm);
    --toast-translate: var(--space-10);    /* 20px */

    /* Toggle */
    --toggle-width: 50px;
    --toggle-height: 24px;
    --toggle-knob-size: 18px;
    --toggle-padding: 3px;
    --color-toggle-bg: #cccccc;
    --color-toggle-bg-active: var(--color-toast-success);

    /* Modal / confirm dialog */
    --modal-width: 90%;
    --modal-max-width: 500px;
    --modal-max-height-offset: 160px; /* used in calc(100vh - 160px) */
    --modal-body-max-height: 45vh;

    /* Shadows (you mostly use “none”, but confirm/toast use shadows) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,.2);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.15);

    /* Transitions */
    --ease: ease;
    --dur-fast: 150ms;
    --dur: 200ms;
    --dur-slow: 300ms;

    /* Z-index */
    --z-tooltip: 1000;
    --z-modal-overlay: 9999;
    --z-modal: 10000;
    --z-modal-close: 10001;
}