/*
 * Command Slate: design tokens.
 * The ONLY file in the product that contains raw colour values. Components use var(--cs-*) exclusively.
 * Contrast (WCAG 2.2): every text pair below is AA (>= 4.5:1); control borders are >= 3:1.
 * See docs/command-slate-design-system.md §3.
 */
:root {
    /* ---- Brand ---------------------------------------------------------------------------- */
    --cs-brand: #315EFB;              /* white on brand: 5.09:1 */
    --cs-brand-hover: #2C55E8;
    --cs-brand-pressed: #2750D7;
    --cs-brand-subtle: #EEF2FF;
    --cs-brand-subtle-border: #C9D6FE;
    --cs-brand-on-dark: #8FA8FF;      /* brand accents on the slate sidebar */
    --cs-accent: #0A7F78;             /* teal: data, progress, completed workflow steps (4.86:1) */
    --cs-accent-subtle: #E3F3F1;

    /* ---- Shell ---------------------------------------------------------------------------- */
    --cs-sidebar-bg: #172033;
    --cs-sidebar-hover: #1D2940;
    --cs-sidebar-active: #24324A;
    --cs-sidebar-border: #26324A;
    --cs-sidebar-text: #AEB8C8;       /* 8.13:1 */
    --cs-sidebar-text-strong: #FFFFFF;
    --cs-sidebar-heading: #8793A6;    /* 5.23:1 */

    /* ---- Surfaces ------------------------------------------------------------------------- */
    --cs-workspace: #F4F6F8;
    --cs-surface: #FFFFFF;
    --cs-surface-subtle: #F8FAFC;
    --cs-surface-hover: #F2F5F9;
    --cs-surface-selected: #EEF2FF;
    --cs-surface-inverse: #172033;
    --cs-skeleton: #E7ECF2;
    --cs-skeleton-shine: #F3F6F9;
    --cs-scrim: rgba(22, 32, 51, 0.36);
    --cs-scrim-light: rgba(22, 32, 51, 0.18);

    /* ---- Text ------------------------------------------------------------------------------ */
    --cs-text: #162033;               /* 16.3:1 */
    --cs-text-secondary: #617086;     /* 5.04:1 on surface, 4.65:1 on workspace */
    --cs-text-tertiary: #6B778A;      /* 4.53:1: supporting text only */
    --cs-text-inverse: #FFFFFF;
    --cs-text-link: #2750D7;

    /* ---- Borders -------------------------------------------------------------------------- */
    --cs-border: #DCE3EA;             /* panels, dividers (decorative) */
    --cs-border-subtle: #E9EEF3;      /* row separators */
    --cs-border-strong: #C5CFDA;
    --cs-border-control: #8391A5;     /* form controls: 3.2:1 (non-text contrast) */

    /* ---- Semantic tones (fg = icons/indicators, strong = text on subtle bg) --------------- */
    --cs-success: #16835D;  --cs-success-strong: #0F6B4B;  --cs-success-subtle: #E8F5EF;  --cs-success-border: #BFE3D2;
    --cs-warning: #A96300;  --cs-warning-strong: #8A5000;  --cs-warning-subtle: #FDF3E4;  --cs-warning-border: #F2D5A8;
    --cs-danger: #C83E4D;   --cs-danger-strong: #A8313F;   --cs-danger-subtle: #FCEBED;   --cs-danger-border: #F2C2C8;
    --cs-info: #315EFB;     --cs-info-strong: #2447C8;     --cs-info-subtle: #EEF2FF;     --cs-info-border: #C9D6FE;
    --cs-neutral: #7A879B;  --cs-neutral-strong: #4A5668;  --cs-neutral-subtle: #EFF2F6;  --cs-neutral-border: #D9E0E8;

    /* ---- Focus ----------------------------------------------------------------------------- */
    --cs-focus: #315EFB;
    --cs-focus-ring: 0 0 0 2px var(--cs-surface), 0 0 0 4px var(--cs-focus);

    /* ---- Typography ----------------------------------------------------------------------- */
    /* Inter (OFL) for Latin with tabular figures; Arabic falls through to Noto Sans Arabic / system. */
    --cs-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
    --cs-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    --cs-fs-kpi: 28px;       --cs-lh-kpi: 34px;
    --cs-fs-page: 24px;      --cs-lh-page: 32px;
    --cs-fs-entity: 22px;    --cs-lh-entity: 30px;
    --cs-fs-section: 16px;   --cs-lh-section: 24px;
    --cs-fs-body: 14px;      --cs-lh-body: 20px;
    --cs-fs-grid: 13px;      --cs-lh-grid: 18px;
    --cs-fs-support: 12px;   --cs-lh-support: 16px;
    --cs-fs-micro: 11px;     --cs-lh-micro: 14px;
    --cs-fw-regular: 400;
    --cs-fw-medium: 500;
    --cs-fw-semibold: 600;

    /* ---- Spacing (8px system, 4px half-step) -------------------------------------------- */
    --cs-space-1: 4px;
    --cs-space-2: 8px;
    --cs-space-3: 12px;
    --cs-space-4: 16px;
    --cs-space-5: 24px;
    --cs-space-6: 32px;
    --cs-space-7: 40px;
    --cs-space-8: 48px;

    /* ---- Shape ----------------------------------------------------------------------------- */
    --cs-radius-sm: 6px;
    --cs-radius: 8px;
    --cs-radius-lg: 12px;

    /* ---- Elevation (flat first; shadow only for things that float) ---------------------- */
    --cs-shadow-1: 0 1px 2px rgba(22, 32, 51, 0.05);
    --cs-shadow-2: 0 2px 6px rgba(22, 32, 51, 0.06), 0 10px 24px rgba(22, 32, 51, 0.10);
    --cs-shadow-3: 0 4px 12px rgba(22, 32, 51, 0.08), 0 24px 56px rgba(22, 32, 51, 0.18);

    /* ---- Layout ---------------------------------------------------------------------------- */
    --cs-topbar-h: 56px;
    --cs-sidebar-w: 240px;
    --cs-sidebar-w-collapsed: 68px;
    --cs-content-pad: 24px;
    --cs-content-max: 1680px;
    --cs-drawer-w: 440px;
    --cs-control-h: 36px;
    --cs-control-h-sm: 32px;

    /* ---- Data grid density ---------------------------------------------------------------- */
    --cs-row-compact: 36px;
    --cs-row-standard: 44px;
    --cs-row-comfortable: 52px;

    /* ---- Motion ---------------------------------------------------------------------------- */
    --cs-duration-fast: 150ms;
    --cs-duration: 200ms;
    --cs-duration-slow: 250ms;
    --cs-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Layers ---------------------------------------------------------------------------- */
    --cs-z-sticky: 10;
    --cs-z-topbar: 30;
    --cs-z-sidebar: 40;
    --cs-z-menu: 50;
    --cs-z-drawer: 60;
    --cs-z-dialog: 70;
    --cs-z-palette: 80;
    --cs-z-toast: 90;
    --cs-z-progress: 100;
}

@media (max-width: 767.98px) {
    :root {
        --cs-content-pad: 16px;
        --cs-fs-page: 20px;
        --cs-lh-page: 28px;
        --cs-fs-entity: 20px;
        --cs-lh-entity: 28px;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    :root { --cs-content-pad: 16px; }
}