/* LILLOX Premium Product Design V2 — machine-aligned CSS tokens */
:root,
:root[data-theme="dark"] {
  --v2-canvas:#060A10;
  --v2-shell:#09111B;
  --v2-surface-1:#0D1622;
  --v2-surface-2:#111D2B;
  --v2-surface-3:#162435;
  --v2-surface-hover:#1A2A3D;
  --v2-border:#223247;
  --v2-border-strong:#2F4965;
  --v2-text:#F5F8FC;
  --v2-text-2:#B7C3D1;
  --v2-text-3:#7F8D9F;
  --v2-accent:#11B8FF;
  --v2-accent-strong:#008DEB;
  --v2-accent-soft:rgba(17,184,255,.12);
  --v2-success:#35C46A;
  --v2-warning:#F4B740;
  --v2-risk:#FF8A34;
  --v2-critical:#FF5B5B;
  --v2-ai:#9B7CFF;
  --v2-focus:#53CCFF;

  --v2-space-1:4px;
  --v2-space-2:8px;
  --v2-space-3:12px;
  --v2-space-4:16px;
  --v2-space-5:20px;
  --v2-space-6:24px;
  --v2-space-7:32px;
  --v2-space-8:40px;
  --v2-space-9:48px;

  --v2-radius-sm:8px;
  --v2-radius-md:10px;
  --v2-radius-lg:12px;
  --v2-radius-xl:16px;
  --v2-radius-2xl:20px;
  --v2-radius-pill:999px;

  --v2-font-display:var(--font-display,'Outfit',system-ui,sans-serif);
  --v2-font-body:var(--font-body,'Work Sans',system-ui,sans-serif);
  --v2-font-mono:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);

  --v2-sidebar:236px;
  --v2-sidebar-collapsed:76px;
  --v2-topbar:64px;
  --v2-content-max:1600px;
  --v2-touch:44px;
  --v2-row:44px;
  --v2-row-compact:36px;

  --v2-motion-fast:100ms;
  --v2-motion:160ms;
  --v2-motion-slow:220ms;
  --v2-ease:cubic-bezier(.2,.8,.2,1);

  --v2-shadow-panel:0 18px 60px rgba(0,0,0,.22);
  --v2-shadow-overlay:0 28px 80px rgba(0,0,0,.48);
  --v2-shadow-focus:0 0 0 3px rgba(17,184,255,.22);

  /* ============ LILLOX MOONLIGHT / Moonlit Reflection Layer ============
     Lockat designprincip (2026-08-23). Manljus mot mork glas/metall -
     riktat ljus som fangas av KANTER, aldrig glod som stralar fran
     YTOR. Aldrig box-shadow: 0 0 Npx <accentfarg> runt ett helt
     element (det ar neon) - alltid en tunn, riktad gradient langs en
     kant, plus ofargade, lagrade skuggor for djup. Denna sektion ar
     den enda kallan for tekniken - sidor laggar ALDRIG till egen
     glod/reflektion-CSS lokalt. */
  --v2-sheen-1:rgba(255,255,255,.07);
  --v2-sheen-2:rgba(255,255,255,.025);
  /* Kall, silvrig - INTE ren vit (#FFF later platt/skarmljus, inte
     reflekterat manljus). Fangar ljuset i ovre vanstra hornet av en kant. */
  --v2-edge-light:rgba(214,227,235,.20);
  /* Viskningen av markets egen petrol (#00B4C8-familjen) i kantens
     svans - som om en avlagsen ljuskalla reflekteras, inte malad dit. */
  --v2-edge-reflection:rgba(0,180,200,.09);
  --v2-depth-contact:rgba(0,0,0,.35);
  --v2-depth-ambient:rgba(0,0,0,.50);
  --v2-glass-tint:rgba(15,25,35,.55);

  /* Brand-glow (2026-08-23, LILLOX First Experience): skild fran
     --v2-accent (funktionell UI, #11B8FF) med avsikt. Detta ar
     logotyppaketets EGEN, officiella cyan (#00B4C8) - anvands ENDAST
     dar nagot genuint AR varumarket sjalvt som ljuskalla (symbolen,
     en framtida "om LILLOX"-yta), aldrig for vanliga knappar/lankar/
     fokusringar. Fortfarande Moonlight-disciplinerat: bred, mjuk,
     avmattad - ingen tajt neon-halo. */
  --v2-brand-core:#7DE4EE;
  --v2-brand-glow:rgba(0,180,200,.16);
  --v2-brand-glow-soft:rgba(0,180,200,.06);
}
:root[data-theme="light"] {
  --v2-canvas:#F3F7FB;
  --v2-shell:#FFFFFF;
  --v2-surface-1:#FFFFFF;
  --v2-surface-2:#F8FAFD;
  --v2-surface-3:#EEF4F9;
  --v2-surface-hover:#E8F1F8;
  --v2-border:#D8E2EC;
  --v2-border-strong:#BECEDD;
  --v2-text:#0B1520;
  --v2-text-2:#425466;
  --v2-text-3:#718096;
  --v2-accent:#007FD4;
  --v2-accent-strong:#0067B1;
  --v2-accent-soft:rgba(0,127,212,.10);
  --v2-success:#23884B;
  --v2-warning:#A86B00;
  --v2-risk:#C55711;
  --v2-critical:#C63C3C;
  --v2-ai:#7256D9;
  --v2-focus:#007FD4;
  --v2-shadow-panel:0 14px 38px rgba(22,42,64,.08);
  --v2-shadow-overlay:0 28px 80px rgba(22,42,64,.18);
}