/* ==========================================================================
   EVPS-1000X Design Tokens
   Enterprise VPS Solutions — WHMCS Theme System
   --------------------------------------------------------------------------
   Source-of-truth design tokens.
   All component CSS reads from these CSS custom properties.
   Theme switching is achieved by overriding [data-theme="light"].
   Density switching is achieved by overriding [data-density="compact"].
   --------------------------------------------------------------------------
   File:    assets/css/evps-1000x-tokens.css
   Loaded:  client area, orderform, and admin templates
   Version: 1.0.0
   License: Proprietary — Enterprise VPS Solutions LLC
   ========================================================================== */

:root {
  /* ── Brand & Primary Palette ─────────────────────────────────────────── */
  --evps-primary:        #3b6cf6;          /* Cobalt — primary actions, links */
  --evps-primary-hover:  #2f5cdf;
  --evps-primary-active: #2750c8;
  --evps-primary-soft:   rgba(59, 108, 246, 0.14);
  --evps-primary-ring:   rgba(59, 108, 246, 0.36);

  --evps-secondary:      #14b8a6;          /* Teal — security/health accent */
  --evps-secondary-soft: rgba(20, 184, 166, 0.14);

  --evps-accent:         #8b5cf6;          /* Violet — AI / premium accent */
  --evps-accent-soft:    rgba(139, 92, 246, 0.14);

  /* Readable label colour for fills of each brand colour (overridden per-brand
     by evps-1000x-custom.css via luminance). Defaults sized for the default
     primary/accent so accent buttons never ship sub-AA white-on-light. */
  --evps-on-primary:     #ffffff;
  --evps-on-accent:      #ffffff;

  /* ── Status / Signal ─────────────────────────────────────────────────── */
  --evps-success:        #2bb673;
  --evps-success-soft:   rgba(43, 182, 115, 0.14);
  --evps-warning:        #f0b429;
  --evps-warning-soft:   rgba(240, 180, 41, 0.16);
  --evps-danger:         #e23d51;
  --evps-danger-soft:    rgba(226, 61, 81, 0.14);
  --evps-info:           #3b6cf6;
  --evps-info-soft:      rgba(59, 108, 246, 0.14);

  /* Status TEXT colors. On dark surfaces the base hue is already legible
     (16:1+ for #2bb673 on #0a0c12). The light-theme override block re-
     declares these to a darker variant so badge / chip / sidebar accent
     text meets WCAG AA on white surfaces too. */
  --evps-success-text:   var(--evps-success);
  --evps-warning-text:   var(--evps-warning);
  --evps-danger-text:    var(--evps-danger);
  --evps-info-text:      var(--evps-info);
  --evps-accent-text:    var(--evps-accent);

  /* ── Surfaces (Dark default) ────────────────────────────────────────── */
  --evps-bg:             #0a0c12;          /* App background */
  --evps-bg-elevated:    #0e1118;          /* Slightly lifted (modals overlay base) */
  --evps-surface:        #12161f;          /* Card surface 1 */
  --evps-surface-2:      #181d28;          /* Card surface 2 (raised) */
  --evps-surface-3:      #1f2533;          /* Hover / selected */
  --evps-surface-inset:  #0c0f16;          /* Inputs, code blocks, wells */

  --evps-border:         #232a39;
  --evps-border-strong:  #2e3648;
  --evps-border-subtle:  #1a2030;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --evps-text:           #e8ecf5;
  --evps-text-muted:     #9aa3b8;
  --evps-text-dim:       #5d667d;
  --evps-text-inverse:   #0a0c12;
  /* "soft" body text — used by ServiceTabRenderer empty-states, the onboarding
     tour, and whois output. It was referenced as var(--evps-text-soft,#475569)
     but never DEFINED, so it fell back to a dark slate in BOTH modes and was
     unreadable (2.2:1) on dark surfaces. Define it mode-aware. */
  --evps-text-soft:      #aab3c5;

  /* ── Chart palette (color-blind safe-ish, sequence-stable) ───────────── */
  --evps-chart-1: #3b6cf6;
  --evps-chart-2: #14b8a6;
  --evps-chart-3: #f0b429;
  --evps-chart-4: #e23d51;
  --evps-chart-5: #8b5cf6;
  --evps-chart-6: #2bb673;
  --evps-chart-7: #ec4899;
  --evps-chart-8: #06b6d4;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --evps-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --evps-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --evps-font-display: "Inter", system-ui, sans-serif;

  --evps-fs-xs:    11px;
  --evps-fs-sm:    12px;
  --evps-fs-base:  14px;
  --evps-fs-md:    15px;
  --evps-fs-lg:    17px;
  --evps-fs-xl:    20px;
  --evps-fs-2xl:   24px;
  --evps-fs-3xl:   30px;
  --evps-fs-4xl:   38px;
  --evps-fs-5xl:   48px;

  --evps-fw-regular:  400;
  --evps-fw-medium:   500;
  --evps-fw-semibold: 600;
  --evps-fw-bold:     700;

  --evps-lh-tight:  1.15;
  --evps-lh-snug:   1.3;
  --evps-lh-normal: 1.5;
  --evps-lh-relaxed:1.7;

  --evps-tracking-tight: -0.015em;
  --evps-tracking-normal: 0;
  --evps-tracking-wide:   0.03em;
  --evps-tracking-caps:   0.08em;

  /* ── Spacing (4-pt grid) ─────────────────────────────────────────────── */
  --evps-space-0:  0;
  --evps-space-1:  4px;
  --evps-space-2:  8px;
  --evps-space-3:  12px;
  --evps-space-4:  16px;
  --evps-space-5:  20px;
  --evps-space-6:  24px;
  --evps-space-7:  32px;
  --evps-space-8:  40px;
  --evps-space-9:  48px;
  --evps-space-10: 64px;
  --evps-space-11: 80px;
  --evps-space-12: 96px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --evps-radius-xs: 3px;
  --evps-radius-sm: 6px;
  --evps-radius-md: 8px;
  --evps-radius-lg: 12px;
  --evps-radius-xl: 16px;
  --evps-radius-2xl: 22px;
  --evps-radius-pill: 999px;

  /* ── Shadow ──────────────────────────────────────────────────────────── */
  --evps-shadow-xs:  0 1px 1px rgba(0,0,0,0.32);
  --evps-shadow-sm:  0 1px 2px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --evps-shadow-md:  0 8px 24px -6px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --evps-shadow-lg:  0 24px 48px -12px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
  --evps-shadow-xl:  0 32px 80px -20px rgba(0,0,0,0.65);
  --evps-shadow-glow:0 0 0 1px rgba(59,108,246,0.4), 0 0 24px rgba(59,108,246,0.18);

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --evps-z-base:       0;
  --evps-z-sticky:     50;
  --evps-z-dropdown:   200;
  --evps-z-overlay:    400;
  --evps-z-drawer:     500;
  --evps-z-modal:      600;
  --evps-z-toast:      700;
  --evps-z-tooltip:    800;
  --evps-z-cmdk:       900;
  --evps-z-ai:         950;

  /* ── Breakpoints (used in JS where needed) ───────────────────────────── */
  --evps-bp-sm:  640px;
  --evps-bp-md:  768px;
  --evps-bp-lg:  1024px;
  --evps-bp-xl:  1280px;
  --evps-bp-2xl: 1536px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --evps-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --evps-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --evps-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --evps-dur-fast:    120ms;
  --evps-dur-base:    200ms;
  --evps-dur-slow:    320ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --evps-content-max:      1320px;
  --evps-sidebar-w:        252px;
  --evps-sidebar-w-sm:     64px;
  --evps-topbar-h:         56px;
  --evps-topbar-h-admin:   52px;

  /* ── Component sizing ────────────────────────────────────────────────── */
  --evps-control-h-sm: 28px;
  --evps-control-h-md: 36px;
  --evps-control-h-lg: 44px;
  --evps-control-px:   12px;

  /* ── Density-driven (overridden by [data-density]) ───────────────────── */
  --evps-row-py:       12px;
  --evps-card-pad:     20px;
  --evps-section-gap:  24px;
}

/* ── Compact density overrides ─────────────────────────────────────────── */
[data-density="compact"] {
  --evps-row-py:       8px;
  --evps-card-pad:     14px;
  --evps-section-gap:  16px;
  --evps-fs-base:      13px;
  --evps-control-h-md: 32px;
}

/* ── Light theme overrides ─────────────────────────────────────────────── */
[data-theme="light"] {
  --evps-bg:             #f4f6fb;
  --evps-bg-elevated:    #ffffff;
  --evps-surface:        #ffffff;
  --evps-surface-2:      #f8fafc;
  --evps-surface-3:      #eef2f8;
  --evps-surface-inset:  #f1f4f9;

  --evps-border:         #dde3ee;
  --evps-border-strong:  #c5cfdf;
  --evps-border-subtle:  #e8edf5;

  --evps-text:           #0e1422;
  --evps-text-muted:     #4d5567;   /* WCAG AA: 7.4:1 on white surface */
  --evps-text-dim:       #5e6878;   /* WCAG AA: 5.6:1 on white surface */
  --evps-text-soft:      #475569;   /* WCAG AA: ~7:1 on white surface */
  --evps-text-inverse:   #ffffff;

  --evps-primary-soft:   rgba(59, 108, 246, 0.10);
  --evps-secondary-soft: rgba(20, 184, 166, 0.10);
  --evps-accent-soft:    rgba(139, 92, 246, 0.10);
  --evps-success-soft:   rgba(43, 182, 115, 0.14);
  --evps-warning-soft:   rgba(240, 180, 41, 0.20);
  --evps-danger-soft:    rgba(226, 61, 81, 0.12);
  --evps-info-soft:      rgba(59, 108, 246, 0.10);

  /* Status text colors that meet 4.5:1 on a light tinted-soft pill or on
     a plain --evps-surface (#fff). The base --evps-success / --evps-warning
     etc. tokens are tuned for *dark* surfaces; in light mode, badge/chip/
     icon text needs noticeably darker variants. */
  --evps-success-text:   #16734a;   /* 5.4:1 on success-soft, 6.7:1 on white */
  --evps-warning-text:   #8a5a00;   /* 5.5:1 on warning-soft, 6.6:1 on white */
  --evps-danger-text:    #b1212f;   /* 5.0:1 on danger-soft, 5.6:1 on white  */
  --evps-info-text:      #1c4eda;   /* 5.4:1 on info-soft, 6.4:1 on white   */
  --evps-accent-text:    #5d2bd6;   /* 5.7:1 on white                       */

  --evps-shadow-xs:  0 1px 1px rgba(15, 23, 42, 0.04);
  --evps-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --evps-shadow-md:  0 8px 24px -6px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  --evps-shadow-lg:  0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --evps-shadow-xl:  0 32px 80px -20px rgba(15, 23, 42, 0.20);
}

/* ── Auto theme follows the OS (no-JS + "Auto" button) ─────────────────────
   Previously theme was JS-only, so no-JS visitors were locked to the dark
   default and "Auto" was inert. Mirror the light token block under
   prefers-color-scheme:light for auto / unset-theme. An explicit
   [data-theme="dark"|"light"] (set by the switcher's cookie+JS) still wins
   because it is a more specific selector outside this media query. */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"], html:not([data-theme]) {
    --evps-bg:#f4f6fb; --evps-bg-elevated:#ffffff;
    --evps-surface:#ffffff; --evps-surface-2:#f8fafc; --evps-surface-3:#eef2f8; --evps-surface-inset:#f1f4f9;
    --evps-border:#dde3ee; --evps-border-strong:#c5cfdf; --evps-border-subtle:#e8edf5;
    --evps-text:#0e1422; --evps-text-muted:#4d5567; --evps-text-dim:#5e6878; --evps-text-soft:#475569; --evps-text-inverse:#ffffff;
    --evps-primary-soft:rgba(59,108,246,.10); --evps-secondary-soft:rgba(20,184,166,.10); --evps-accent-soft:rgba(139,92,246,.10);
    --evps-success-soft:rgba(43,182,115,.14); --evps-warning-soft:rgba(240,180,41,.20); --evps-danger-soft:rgba(226,61,81,.12); --evps-info-soft:rgba(59,108,246,.10);
    --evps-success-text:#16734a; --evps-warning-text:#8a5a00; --evps-danger-text:#b1212f; --evps-info-text:#1c4eda; --evps-accent-text:#5d2bd6;
    --evps-shadow-xs:0 1px 1px rgba(15,23,42,.04);
    --evps-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.04);
    --evps-shadow-md:0 8px 24px -6px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.06);
    --evps-shadow-lg:0 24px 48px -12px rgba(15,23,42,.18);
    --evps-shadow-xl:0 32px 80px -20px rgba(15,23,42,.20);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --evps-dur-fast: 0ms;
    --evps-dur-base: 0ms;
    --evps-dur-slow: 0ms;
  }
}