/* =========================================================================
 * TSync Intelligence v4.0.2 — Design Tokens
 *
 * Single source of truth for the TSync visual identity (spec §14.1). Every
 * widget modernisation override (tsync_widget_modernization.css) and every
 * new component MUST consume these CSS custom properties instead of
 * hard-coding values. That keeps the brand coherent and lets us re-skin in
 * one place.
 *
 * Notes:
 *   - Tokens cover colour, typography, spacing, radius, shadow and motion.
 *   - Legacy base CSS still uses hard-coded values; the modernisation
 *     layer (tsync_widget_modernization.css) overrides them, mapping legacy
 *     selectors to these tokens.
 *   - Dark mode is reserved (tokens prefixed --tsync-dark-* are placeholder).
 * ========================================================================= */
:root {
    /* ── Brand colours ───────────────────────────────────────────────── */
    /* v4.2.3 — unified brand: TSync teal (was blue). Aligns the legacy
     * --tsync-color-primary palette with the modern --tsx-brand used by
     * the design system, login, and error pages. */
    --tsync-color-primary:       #0d7a8a;   /* TSync teal */
    --tsync-color-primary-600:   #0a626f;
    --tsync-color-primary-700:   #084d59;
    --tsync-color-primary-50:    #e6f7f9;
    --tsync-color-primary-hover: #0a626f;
    /* NB: the Tailwind `primary` scale defaults (--tsx-primary-50..900, R G B triplets) live in
     * resources/css/tailwind.css → compiled into assets/builds/tailwind.css (co-located with the
     * tw-*-primary utilities that consume them, so they resolve on every page). The Theme Manager
     * overrides them per client re-brand. [task #17] */

    --tsync-color-success:       #16a34a;
    --tsync-color-success-50:    #f0fdf4;
    --tsync-color-warning:       #d97706;
    --tsync-color-warning-50:    #fffbeb;
    --tsync-color-danger:        #dc2626;
    --tsync-color-danger-50:     #fef2f2;
    --tsync-color-info:          #0891b2;
    --tsync-color-info-50:       #ecfeff;

    /* ── Neutral / surface ───────────────────────────────────────────── */
    --tsync-color-bg:            #f8fafc;
    --tsync-color-surface:       #ffffff;
    --tsync-color-surface-2:     #f1f5f9;
    --tsync-color-on-brand:      #ffffff;   /* foreground over brand/colored bg */
    --tsync-color-border:        #e2e8f0;
    --tsync-color-border-strong: #cbd5e1;
    --tsync-color-divider:       #e2e8f0;

    /* ── Text ────────────────────────────────────────────────────────── */
    --tsync-color-text:          #0f172a;
    --tsync-color-text-secondary:#475569;
    --tsync-color-text-muted:    #64748b;
    --tsync-color-text-inverse:  #ffffff;
    --tsync-color-link:          var(--tsync-color-primary);
    --tsync-color-link-hover:    var(--tsync-color-primary-700);

    /* ── Typography ──────────────────────────────────────────────────── */
    --tsync-font-family:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tsync-font-family-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --tsync-font-size-xs:        12px;
    --tsync-font-size-sm:        13px;
    --tsync-font-size-base:      14px;
    --tsync-font-size-md:        15px;
    --tsync-font-size-lg:        17px;
    --tsync-font-size-xl:        20px;
    --tsync-font-size-2xl:       24px;
    --tsync-font-size-3xl:       30px;

    --tsync-font-weight-regular: 400;
    --tsync-font-weight-medium:  500;
    --tsync-font-weight-semi:    600;
    --tsync-font-weight-bold:    700;

    --tsync-line-height-tight:   1.2;
    --tsync-line-height-normal:  1.5;
    --tsync-line-height-loose:   1.75;

    /* ── Spacing scale (8px grid) ────────────────────────────────────── */
    --tsync-space-0:             0;
    --tsync-space-1:             4px;
    --tsync-space-2:             8px;
    --tsync-space-3:             12px;
    --tsync-space-4:             16px;
    --tsync-space-5:             20px;
    --tsync-space-6:             24px;
    --tsync-space-8:             32px;
    --tsync-space-10:            40px;
    --tsync-space-12:            48px;
    --tsync-space-16:            64px;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --tsync-radius-none:         0;
    --tsync-radius-sm:           4px;
    --tsync-radius-md:           8px;
    --tsync-radius-lg:           12px;
    --tsync-radius-xl:           16px;
    --tsync-radius-pill:         9999px;

    /* ── Elevation / shadows ─────────────────────────────────────────── */
    --tsync-shadow-sm:           0 1px 2px rgba(15, 23, 42, .06);
    --tsync-shadow-md:           0 4px 8px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --tsync-shadow-lg:           0 10px 20px rgba(15, 23, 42, .10), 0 2px 4px rgba(15, 23, 42, .06);
    --tsync-shadow-xl:           0 20px 40px rgba(15, 23, 42, .12);
    --tsync-shadow-inset:        inset 0 1px 2px rgba(15, 23, 42, .08);

    /* ── Motion ─────────────────────────────────────────────────────── */
    --tsync-motion-fast:         120ms;
    --tsync-motion-base:         200ms;
    --tsync-motion-slow:         320ms;
    --tsync-motion-ease:         cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ──────────────────────────────────────────────── */
    --tsync-z-base:              0;
    --tsync-z-dropdown:          1000;
    --tsync-z-sticky:            1020;
    --tsync-z-fixed:             1030;
    --tsync-z-modal-backdrop:    1040;
    --tsync-z-modal:             1050;
    --tsync-z-popover:           1060;
    --tsync-z-tooltip:           1070;
    --tsync-z-toast:             1080;

    /* ── Component-specific (semantic shorthands) ────────────────────── */
    --tsync-card-bg:             var(--tsync-color-surface);
    --tsync-card-border:         var(--tsync-color-border);
    --tsync-card-shadow:         var(--tsync-shadow-sm);
    --tsync-card-radius:         var(--tsync-radius-lg);
    --tsync-card-padding:        var(--tsync-space-5);

    --tsync-button-radius:       var(--tsync-radius-md);
    --tsync-input-radius:        var(--tsync-radius-md);
    --tsync-input-border:        var(--tsync-color-border-strong);
    --tsync-input-focus:         var(--tsync-color-primary);

    --tsync-table-row-hover:     var(--tsync-color-surface-2);
    --tsync-table-border:        var(--tsync-color-border);
}

/* Dark-mode token reservation (not active by default; activated by adding
   `data-tsync-theme="dark"` to <html>). */
[data-tsync-theme="dark"] {
    --tsync-color-bg:            #0f172a;
    --tsync-color-surface:       #1e293b;
    --tsync-color-surface-2:     #334155;
    --tsync-color-border:        #334155;
    --tsync-color-text:          #f1f5f9;
    --tsync-color-text-secondary:#cbd5e1;
    --tsync-color-text-muted:    #94a3b8;
}

/* =========================================================================
 * v4.2.2 — Global --tsx-* aliases.
 *
 * Why this exists:
 *   The v4.1.8 modern design system (assets/css/tsync-admin-modern.css)
 *   defines tokens inside `.tsx-scope { --tsx-brand: ...; ... }` so they're
 *   only available on opt-in modern pages. The v4.2.1 governance sweep
 *   replaced hex literals in unscoped views (login, error, db-upgrade,
 *   forgot-password) with `var(--tsx-*)`, which broke the brand on those
 *   pages because the tokens never resolved.
 *
 * Fix: re-declare the same --tsx-* names at :root scope so any page using
 * them keeps the brand colors even without `.tsx-scope`. Mirrors the
 * scoped definitions in tsync-admin-modern.css.
 * ========================================================================= */
:root {
    /* Neutral 9-step (Zinc) — mirrors tsync-admin-modern.css .tsx-scope */
    --tsx-n-50:  #fafafa;
    --tsx-n-100: #f4f4f5;
    --tsx-n-200: #e4e4e7;
    --tsx-n-300: #d4d4d8;
    --tsx-n-400: #a1a1aa;
    --tsx-n-500: #71717a;
    --tsx-n-600: #52525b;
    --tsx-n-700: #3f3f46;
    --tsx-n-800: #27272a;
    --tsx-n-900: #18181b;

    /* Brand teal — TSync */
    --tsx-brand:        #0d7a8a;
    --tsx-brand-hover:  #0a626f;
    --tsx-brand-tint:   rgba(13, 122, 138, 0.08);
    --tsx-brand-tint-2: rgba(13, 122, 138, 0.14);

    /* Semantic */
    --tsx-green: #16a34a;
    --tsx-amber: #d97706;
    --tsx-red:   #dc2626;
    --tsx-blue:  #2563eb;

    /* Surfaces */
    --tsx-bg:        #ffffff;
    --tsx-bg-page:   #fafafa;
    --tsx-bg-subtle: #f4f4f5;
}