/* ---------------------------------------------------------------------------
   Design tokens.
   Single source of truth for color, type, spacing and elevation. Loaded before
   app.css/styles.css so every rule can reference these instead of a literal.

   The primary ramp is deliberately pinned to Bootstrap 5's #0d6efd, which is
   also the Kendo bootstrap theme's primary. Telerik 4.x ships colors baked into
   its stylesheet (only sizing is exposed as custom properties), so aligning to
   its palette is the only way to stay coherent without overriding its internals.
   --------------------------------------------------------------------------- */

:root {
    /* -- Neutrals ------------------------------------------------------- */
    --c-neutral-0: #ffffff;
    --c-neutral-25: #fbfcfd;
    --c-neutral-50: #f6f8fa;
    --c-neutral-100: #eef1f4;
    --c-neutral-200: #e2e6eb;
    --c-neutral-300: #cbd2da;
    --c-neutral-400: #9aa4b2;
    --c-neutral-500: #6b7684;
    --c-neutral-600: #4d5866;
    --c-neutral-700: #384250;
    --c-neutral-800: #232b36;
    --c-neutral-900: #141a21;

    /* -- Brand / primary ------------------------------------------------ */
    --c-primary: #0d6efd;
    --c-primary-hover: #0b5ed7;
    --c-primary-active: #0a58ca;
    --c-primary-tint: #e7f1ff;
    --c-primary-border: #a7c8fe;

    /* -- Status --------------------------------------------------------- */
    /* Text-safe variants clear 4.5:1 on white; the plain token is for fills. */
    --c-danger: #d92d20;
    --c-danger-text: #b42318;
    --c-danger-tint: #fef3f2;
    --c-danger-border: #fda29b;

    --c-success: #12a150;
    --c-success-text: #08703a;
    --c-success-tint: #edfbf2;
    --c-success-border: #8fdcae;

    --c-warning: #dc6803;
    --c-warning-text: #b54708;
    --c-warning-tint: #fff8f0;
    --c-warning-border: #fdd7a5;

    --c-info: var(--c-primary);
    --c-info-text: #0a58ca;
    --c-info-tint: var(--c-primary-tint);
    --c-info-border: var(--c-primary-border);

    /* -- Surfaces ------------------------------------------------------- */
    --c-surface: var(--c-neutral-0);
    --c-surface-sunken: var(--c-neutral-50);
    --c-surface-raised: var(--c-neutral-0);
    --c-surface-hover: var(--c-neutral-50);
    --c-surface-muted: var(--c-neutral-100);

    /* -- Borders -------------------------------------------------------- */
    --c-border: var(--c-neutral-200);
    --c-border-strong: var(--c-neutral-300);
    --c-border-subtle: var(--c-neutral-100);

    /* -- Text ----------------------------------------------------------- */
    --c-text-strong: var(--c-neutral-900);
    --c-text: var(--c-neutral-800);
    --c-text-muted: var(--c-neutral-500);      /* 4.6:1 on white */
    /* For small uppercase labels (12px), which are not "large text" under WCAG
       and often sit on --c-surface-sunken rather than white: --c-text-muted is
       only 4.34:1 against that background, so those use this instead (6.8:1). */
    --c-text-subtle: var(--c-neutral-600);
    --c-text-disabled: #767f8c;                /* 3.9:1 on white */
    --c-text-inverse: var(--c-neutral-0);

    /* -- Sidebar (dark surface, own scale) ------------------------------ */
    --c-sidebar-bg: #131a24;
    --c-sidebar-bg-alt: #0e141c;
    --c-sidebar-border: rgba(255, 255, 255, 0.08);
    --c-sidebar-text: #aab4c2;
    --c-sidebar-text-strong: #ffffff;
    --c-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --c-sidebar-active-bg: rgba(255, 255, 255, 0.10);
    --c-sidebar-accent: #4d94ff;

    /* -- Vendor accents (bot configuration headers) --------------------- */
    --c-vendor-twilio: #ed2f46;
    --c-vendor-vonage: #f69423;

    /* -- Data series ----------------------------------------------------
       Three steps down the primary ramp, for splitting one measure into its
       parts (cost by component). Deliberately not the status colors: green
       and orange would read as a verdict on a component that is merely
       expensive. All three carry white text at >= 4.5:1 except -3, which is
       a fill only and must never be given text. */
    --c-series-1: #0a58ca;
    --c-series-2: #4d94ff;
    --c-series-3: #a7c8fe;

    /* -- Typography ----------------------------------------------------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.3125rem;
    --fs-2xl: 1.5rem;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --lh-tight: 1.25;
    --lh-normal: 1.5;

    /* -- Spacing -------------------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 3rem;

    /* -- Radii ---------------------------------------------------------- */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-pill: 999px;

    /* -- Elevation ------------------------------------------------------ */
    --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sh-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
    --sh-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --sh-focus: 0 0 0 3px rgba(13, 110, 253, 0.25);

    /* -- Layout --------------------------------------------------------- */
    --layout-max: 1440px;
    --layout-gutter: 1.75rem;
    --sidebar-width: 260px;
    --topbar-height: 3.5rem;

    /* -- Motion --------------------------------------------------------- */
    --motion-fast: 120ms ease;
    --motion-base: 200ms ease;

    /* Legacy alias: styles.css used --flex-gap before the token layer. */
    --flex-gap: var(--sp-3);
}