/* ═══════════════════════════════════════════════════════════════
   XENTRO · Design Tokens v3
   Central design-token layer for the premium macOS/iOS Liquid Glass
   system. Loaded FIRST so everything downstream can consume it.

   All tokens are derived from the runtime theme variables (injected by
   XTheme at :root), so live theme switching updates the whole app and
   these tokens stay in sync automatically.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Color ── */
    --x-accent:          var(--blue,  #1E88F2);
    --x-accent-2:        var(--blue2, #2A7BFF);
    --x-cyan:            var(--cyan,  #22C8F2);
    --x-success:         var(--green2, #2BD06A);
    --x-warning:         var(--orange2, #FFA047);
    --x-danger:          var(--red,   #FF5666);

    --x-text:            var(--tx,  #EDF2FC);
    --x-text-muted:      var(--tx2, #A7B4CB);
    --x-text-faint:      var(--tx3, #6B7794);
    --x-text-invert:     #FFFFFF;

    --x-bg:              var(--bg0,  #070A12);
    --x-bg-elevated:     var(--bg1,  #0C111E);
    --x-surface:         var(--surface-2, rgba(10,16,28,.48));
    --x-surface-2:       var(--surface-3, rgba(14,22,40,.52));
    --x-surface-3:       var(--surface-4, rgba(14,22,40,.62));
    /* representative opaque surface for readable regions (syntax/code) */
    --x-surface-solid:   #0B1020;

    --x-border:          var(--line,   rgba(122,148,200,.14));
    --x-border-strong:   var(--line2,  rgba(122,148,200,.28));
    --x-glass-border:    var(--glass-border, rgba(255,255,255,.06));
    --x-glass-highlight: inset 0 1px 0 rgba(255,255,255,.07);

    /* ── Radius ── */
    --x-radius-xs: 6px;
    --x-radius-sm: 10px;    /* controls, inputs */
    --x-radius-md: 14px;    /* cards, lists */
    --x-radius-lg: 18px;    /* large panels */
    --x-radius-xl: 26px;    /* app window, sheets */

    /* ── Shadows ── */
    --x-shadow-soft:     0 6px 18px rgba(0,0,0,.24);
    --x-shadow-floating: 0 18px 48px rgba(0,0,0,.40);
    --x-shadow-overlay:  0 30px 80px rgba(0,0,0,.52);

    /* ── Blur ── */
    --x-blur-sm: 8px;
    --x-blur-md: 16px;
    --x-blur-lg: 24px;

    /* ── Motion ── */
    --x-ease-out:   cubic-bezier(.22,.61,.36,1);
    --x-ease-inout: cubic-bezier(.4,0,.2,1);
    --x-fast:   130ms;
    --x-base:   200ms;
    --x-slow:   300ms;
}

/* ══ GLOBAL: CUSTOM SCROLLBARS (thin, dark, native-feeling) ══ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ══ GLOBAL: SELECTION + FOCUS ══ */
::selection { background: rgba(34,200,242,.26); }
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--x-accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ══ GLOBAL: SMOOTH NATIVE FEEL ══ */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a, input, select, textarea, label, .nav-item, .card, .stat-mini, .cmd-card {
    -webkit-tap-highlight-color: transparent;
}

/* ══ MOTION — reduce motion for accessibility ══ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}