/* =========================================================================
   TicketingSystem design tokens — shared by the staff app and the customer portal.
   Link: _content/TicketingSystem.UI.Shared/css/tokens.css (then components.css).
   Hex values mirror TicketingSystem.Module/Presentation (Branding, TicketStatusStyle,
   UiTones); change both together.
   ========================================================================= */

:root {
    /* Brand — Fluent blue, same accent as the DevExpress Fluent themes. */
    --ts-accent: #0f6cbd;
    --ts-accent-hover: #115ea3;
    --ts-accent-pressed: #0c3b5e;
    --ts-accent-text: #0f6cbd;      /* links / accent text on the page surface */
    --ts-accent-text-strong: #115ea3; /* links / accent text on tinted rows (>= 4.5:1 on the danger / warning tints) */
    --ts-on-accent: #ffffff;
    --ts-accent-soft: #ebf3fc;      /* active navigation item, count pills */

    /* Semantic tones (KPI tiles, badges, alerts). */
    --ts-tone-info: #0284c7;
    --ts-tone-success: #16a34a;
    --ts-tone-warning: #d97706;
    --ts-tone-danger: #dc2626;
    --ts-tone-neutral: #6b7280;

    /* Text on the light tinted tags (WCAG AA, >= 4.5:1 on the tint over white and the #f5f5f5 page;
       the tone colours above are too light for small text there: 4.47 / 4.39:1 before). */
    --ts-tag-preventive-text: #0d6b64; /* "Preventive" ticket-type tag (teal) */
    --ts-success-text: #166534;        /* positive badges, e.g. the portal's "Active" agreement */

    /* Ticket status colours (project UI standard, May 2026). */
    --ts-status-new: #0284c7;
    --ts-status-acknowledged: #0d9488;
    --ts-status-inprogress: #7c3aed;
    --ts-status-awaitingcustomer: #d97706;
    --ts-status-resolved: #16a34a;
    --ts-status-closed: #6b7280;
    --ts-status-reopened: #dc2626;
    --ts-status-cancelled: #9ca3af;

    /* Surfaces and text: the DevExpress Fluent theme's public tokens (they follow Light/Dark), with Fluent 2
       light neutrals as the fallback where no DevExpress theme is loaded. */
    --ts-surface: var(--dxds-color-surface-neutral-default-rest, #ffffff);
    --ts-surface-subtle: #fafafa;
    --ts-surface-page: #f5f5f5;
    --ts-border: var(--dxds-color-border-neutral-default-rest, #e0e0e0);
    --ts-border-strong: #d1d1d1;
    --ts-text: var(--dxds-color-content-neutral-default-rest, #242424);
    --ts-text-secondary: #424242;
    --ts-text-muted: var(--dxds-color-content-neutral-subdued-rest, #616161);

    /* Spacing scale 4 / 8 / 12 / 16 / 24 / 32. */
    --ts-space-1: 4px;
    --ts-space-2: 8px;
    --ts-space-3: 12px;
    --ts-space-4: 16px;
    --ts-space-5: 24px;
    --ts-space-6: 32px;

    --ts-radius-sm: 4px;
    --ts-radius-md: 8px;
    --ts-radius-pill: 999px;

    --ts-font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    --ts-font-size-sm: 0.75rem;
    --ts-font-size-md: 0.875rem;

    /* Date/time cells use tabular figures so digits align. */
    --ts-numeric: tabular-nums;

    /* App shell (shell.css): header height, navigation width, content width, elevation. */
    --ts-header-height: 52px;
    --ts-sidebar-width: 240px;
    --ts-content-max-width: 1400px;
    --ts-hover: rgba(0, 0, 0, 0.04);
    --ts-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.08);
    --ts-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Dark surfaces: the staff app's Fluent Dark (XAF sets body.dxbl-theme-dark), or opt in with
   <html data-ts-theme="dark"> / class="ts-theme-dark". Chips and badges need nothing: components.css
   derives their tints from the inherited text colour. */
body.dxbl-theme-dark,
:root[data-ts-theme="dark"],
.ts-theme-dark {
    --ts-accent-hover: #0f6cbd;
    --ts-accent-pressed: #0c3b5e;
    --ts-accent-text: #479ef5;
    --ts-accent-text-strong: #62abf5;
    --ts-accent-soft: rgba(71, 158, 245, 0.16);
    --ts-tag-preventive-text: #5eead4;
    --ts-success-text: #4ade80;
    --ts-hover: rgba(255, 255, 255, 0.06);
    --ts-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ts-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --ts-surface: var(--dxds-color-surface-neutral-default-rest, #292929);
    --ts-surface-subtle: #1f1f1f;
    --ts-surface-page: #141414;
    --ts-border: var(--dxds-color-border-neutral-default-rest, #525252);
    --ts-border-strong: #666666;
    --ts-text: var(--dxds-color-content-neutral-default-rest, #ffffff);
    --ts-text-secondary: #d6d6d6;
    --ts-text-muted: var(--dxds-color-content-neutral-subdued-rest, #adadad);
}