/*
 * FANTÁSTICO HOST — Design System Foundation
 * Phase: V1.2 / D01
 * Purpose: shared visual tokens and safe cross-surface primitives.
 */

:root{
  --nv-font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --nv-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --nv-size-xs:.75rem;--nv-size-sm:.875rem;--nv-size-md:1rem;--nv-size-lg:1.125rem;--nv-size-xl:1.375rem;
  --nv-size-2xl:clamp(1.75rem,3vw,2.35rem);--nv-size-3xl:clamp(2.1rem,4vw,3.35rem);
  --nv-leading-tight:1.15;--nv-leading-body:1.6;
  --nv-space-1:.25rem;--nv-space-2:.5rem;--nv-space-3:.75rem;--nv-space-4:1rem;--nv-space-5:1.25rem;
  --nv-space-6:1.5rem;--nv-space-8:2rem;--nv-space-10:2.5rem;--nv-space-12:3rem;
  --nv-radius-sm:8px;--nv-radius-md:12px;--nv-radius-lg:16px;--nv-radius-xl:22px;--nv-radius-pill:999px;
  --nv-control-h:44px;--nv-focus:#64ddff;--nv-focus-ring:0 0 0 3px rgba(100,221,255,.30);
  --nv-success:#20a66a;--nv-warning:#c98613;--nv-danger:#d94b5c;--nv-info:#2b78ff;
  --nv-ease:cubic-bezier(.2,.8,.2,1);--nv-fast:140ms;--nv-normal:220ms;
  --nv-shadow-sm:0 4px 16px rgba(0,0,0,.10);--nv-shadow-md:0 14px 38px rgba(0,0,0,.16);--nv-shadow-lg:0 24px 70px rgba(0,0,0,.24);
}
body{font-family:var(--nv-font-sans);line-height:var(--nv-leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--nv-focus);outline-offset:3px}
:where(button,input,select,textarea){font:inherit}
:where(button,.btn,[role="button"]){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:where(.btn,button,input,select,textarea){transition:border-color var(--nv-fast) var(--nv-ease),box-shadow var(--nv-fast) var(--nv-ease),background-color var(--nv-fast) var(--nv-ease),color var(--nv-fast) var(--nv-ease),transform var(--nv-fast) var(--nv-ease)}
:where(input,select,textarea)::placeholder{opacity:.74}
:where(.btn,button):disabled,:where(input,select,textarea):disabled{cursor:not-allowed;opacity:.58}
:where(.btn,button)[aria-busy="true"]{cursor:progress}
:where(img,svg,video,canvas){max-width:100%}
:where(table),:where(.badge,[class*="status"]){font-variant-numeric:tabular-nums}
.site-header,.client-surface{--nv-surface:#0d2340;--nv-surface-2:#102b4d;--nv-border:rgba(255,255,255,.12);--nv-text:#f8fafc;--nv-muted:#a9b7ca;--nv-accent:#20c8f6}
.whmcs-admin-surface{--nv-surface:#fff;--nv-surface-2:#f7f9fb;--nv-border:#d8dee6;--nv-text:#344054;--nv-muted:#667085;--nv-accent:#337ab7}
.client-surface :where(.card,.panel,.table-wrap),.whmcs-admin-surface :where(.card,.panel,.table-wrap){isolation:isolate}
.client-surface :where(input,select,textarea),.admin-auth-surface :where(input,select,textarea){min-height:var(--nv-control-h)}
.client-surface :where(.btn,button),.admin-auth-surface :where(.btn,button){min-height:var(--nv-control-h)}
:where(.alert,[role="status"],[role="alert"]){overflow-wrap:anywhere}
:where(.table-wrap){max-width:100%;overscroll-behavior-x:contain}
:where(.pagehead,.whmcs-page-title,.section-heading){text-wrap:balance}
:where(p,.muted,.page-subtitle){text-wrap:pretty}
.nv-stack{display:flex;flex-direction:column;gap:var(--nv-space-4)}
.nv-stack-lg{display:flex;flex-direction:column;gap:var(--nv-space-6)}
.nv-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--nv-space-3)}
.nv-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--nv-space-3)}
.nv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--nv-space-5)}
.nv-surface{border:1px solid var(--nv-border);border-radius:var(--nv-radius-lg);background:var(--nv-surface)}
.nv-muted{color:var(--nv-muted)}.nv-truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nv-wrap{overflow-wrap:anywhere}
.nv-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:768px){:root{--nv-space-10:2rem;--nv-space-12:2.5rem}:where(.nv-actions)>.btn{min-height:44px}}
@media(max-width:420px){.nv-actions{align-items:stretch}.nv-actions>.btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}